구글 스프레드시트로 깨진 한글 UTM 복구하기 #Appsscript #decodeURL

한글이 URL에 들어가면 깨진다.

그래서 UTM 값을 한글로 작성해서 랜딩 URL을 만들어 놓으면, 실제 랜딩 시에는 잔뜩 깨진 URL로 랜딩하게 된다. 

 

예컨대

 

https://sjdb.tistory.com/132?utm_source=디토&utm_medium=하입보이&utm_campaign=오마갓&utm_content=어텐션&utm_term=쿠키

랜딩을 이렇게 만들어 놔도

 

https://sjdb.tistory.com/132?utm_source=%EB%94%94%ED%86%A0&utm_medium=%ED%95%98%EC%9E%85%EB%B3%B4%EC%9D%B4&utm_campaign=%EC%98%A4%EB%A7%88%EA%B0%93&utm_content=%EC%96%B4%ED%85%90%EC%85%98&utm_term=%EC%BF%A0%ED%82%A4

이런데에 랜딩이 되는 것이다.

 

왜 그런지 찾아봤더니 URL 인코딩(= URL에서 ASCII 문자가 아닌 문자는 전송될 수 없기 때문에, 이런 문자들을 UTF-8 규칙에 맞추어 전송할 수 있는 '% 어쩌고'의 형태로 변환하는 것)때문이라고 하는데

 

자세한 건 모르겠고 아무튼 한글은 ASCII 문자가 아니기 때문에 깨진다. 그리고 이렇게 되면 지난 시간에 공들여 만들어 놓은 UTM 추출기 사용에 문제가 생긴다

 

구글 스프레드시트로 UTM 추출기 만들기 #구글시트 #UTM

 

UTM 값이 한글이면 B3처럼 나와야 하는데, 랜딩 해보면 B4처럼 나온다. '남들은 어떤 규칙으로 UTM을 구성하는지' 궁금해져서 만든 추출기인데 이래서는 규칙을 알 수 없다. UTM 추출기를 활용해 스프레드시트에서 깨진 한글 URL을 되돌리는 법을 알아보자

 

 

이 작업의 목표는 다음과 같다.

UTM 추출기에 UTF-8로 인코딩된 한글 URL을 넣어도 UTM이 잘 추출되도록 한다.

 

완성된 작업물은 utm 추출기 링크 내에 다른 시트로 만들어 놨다.

 

1. DECODE URL 함수 찾기

사실 방법은 간단하다. 한글이 encode 되어 깨졌으니, 깨진 한글을 다시 decode 하면 된다.

 

일단 구글 스프레드시트에는 '=encodeurl' 이라는 함수가 있다. 

이렇게 주어진 텍스트를 URL로 인코딩하는(=한글을 깨트리는) 함수다. 그래서 당연히 반대로 작동하는 '=decodeurl'이라는 함수도 있을 줄 알았다.

 

근데 없었다. 

 

하지만 누군가는 어떻게든 하고 있지 않을까? 구글에 검색해 봤다. 

 

https://gist.github.com/jlhernando/bbadf8fb606e2bc13d8ee6512cd4d0a2

Decode URLs in Google Sheets creating a custom fucntion in Apps Script

역시나 미리 고민한 어떤 사람의 github를 찾았다. 남이 미리 고민해서 기록해 놓은 솔루션을 후딱 갖다 쓰는 것이 인류 문명 발전의 원동력이다. 이제 이걸로 구글 스프레드시트에 Custom Function 을 만들어보자

 

2. 구글 스프레드시트 커스텀 함수 만들기

/* Both these funcitons will work fine */

// As a function declaration
function DECODE(url) {
  return decodeURI(url)
}

// Or as an arrow function
const DECODEURL = (url) => decodeURI(url)

발견한 코드는 위와 같다. Javascript의 decodeURI()라는 코드를 이용하는 것 같은데, 나는 Javascript는 거의 모르기 때문에 원리는 설명할 수 없다. 다만 감으로 해석해 보면 스프레드시트에 DECODE()라고 함수를 쓰면 Javascript의 decodeURI()  값을 결괏값으로 반환하겠다는 뜻 같다.

 

커스텀 함수라는걸 만들어보자.

 

구글 스프레드시트에서 확장프로그램 > Apps Script를 누르면

 

(이전에 만들어 둔 프로젝트가 없다면) 이렇게 제목 없는 프로젝트에 디폴트 코드가 쓰여있을 것이다. 

 

 

원래 써있던걸 다 지우고 발견한 코드를 복붙 해주면 된다.

 

그리고 그대로 '새 배포'

 

배포를 누르면 배포 유형 및 배포 설정값을 입력해야 하는데, 이 부분은 chatGPT의 조언을 구했다. 

이렇게 해서 URL을 decode할 수 있는 커스텀 함수를 만들었다.

 

새로운 함수가 잘 작동한다.

 

3. Decode 함수를 경유해서 utm 추출

utm 추출기를 만들 때, 어떤 url이 주어지든 파라미터 별로 utm 값을 잘 추출하도록 함수를 잘 만들어뒀기 때문에, 주어지는 url을 decode 된 url로만 바꿔주면 된다.

 

1) 랜딩 URL 그대로 복사해서 붙여 넣기
2) decode URL 열에서는 입력된 랜딩 URL을 decode (=인코딩 되어 깨진 한글 텍스트를 다시 한글로 복구)
3) decode 한 URL (=깨졌던 한글이 제대로 된 한글로 표기된 URL) 기준으로 utm 추출

 

이런 수순이 되는 것.

 

함수에서 기존에 랜딩 url을 다이렉트로 참조하게 되어있던 부분 (아래 캡처 내 수식에서 '$B3'으로 된 모든 부분)을 decode() 함수를 쓴 칸 ('$C3')을 참조하게끔 바꿔주면 된다.

 

 

이렇게

잘 된다.

 

끝.