GTM의 정규식 표(RegEx Table)를 이용하여 'www.' 제거한 URL 수집하기

nooreong·2023년 1월 13일
2
post-thumbnail

안녕하세요.
nooreong입니다.

오늘은 GTM의 정규식 표 변수를 이용해 'www.'가 제거된 URL을 수집하는 방법에 대해 소개하겠습니다.

저희 회사는 웹사이트에서 사용자가 링크를 클릭 시 이벤트를 발생시키고, 매개변수로 click_url을 함께 전송하고 있는데요. 첫 배포 후 2-3일 정도 쌓인 데이터를 분석하다가 문제를 발견했습니다.

저희 웹사이트는 'www.'의 유무에 상관 없이 탐색이 가능한데, 같은 링크를 클릭했음에도 최초에 'www.'가 있는 상태로 접속했냐, 없는 상태로 접속했냐에 따라 URL이 따로 집계 되었던 거죠.

그래서 이를 하나로 집계하기 위한 방법이 필요했습니다.

RegEx Table

다행히 GTM에서는 특정 데이터가 표현식에 매칭되면 해당 데이터를 가공하거나 대체할 수 있는 정규식 표(RegEx Table) 변수를 제공하는데요. 어떻게 사용하는지 하나씩 살펴보겠습니다.

Input Variable

우선, {{Click URL}}이라는 기본 제공 변수가 Input Variable로 들어가는 것을 확인하실 수 있습니다. GTM에서는 저희가 사용하지 않더라도 자동으로 링크 클릭 시 해당 변수에 링크의 URL, 즉 <a> 태그의 href 값을 담습니다.

예를 들어 제 velog에 GTM 코드가 삽입되어있다 가정하면, 소개 페이지를 클릭 시 다음과 같은 값을 담게 됩니다.

Pattern

다음으로는 난해한 문자열이 Pattern에 적혀있는 것을 확인하실 수 있습니다. https와 www를 통해 간신히 URL과 연관이 있겠구나 추측할 뿐입니다.

이 문자열이 바로 정규식인데요. 정규식을 통해 Input Variable이 우리가 가공할 데이터의 패턴이 맞는지 검사합니다.

보기에는 복잡해보일 수 있어도 다른 사례들에 비하면 너무나도 간단한 편이므로 이것이 무슨 의미인지 자세히 보고 넘어가겠습니다.

^(https?:\/\/)(www\.)?(.+)
  • [^] : 데이터의 시작부터 반드시 패턴과 일치해야 한다는 의미입니다.
  • [(] : 그룹 지정을 시작하기 위해 괄호를 엽니다.
  • [http] : http가 있어야 한다는 의미입니다.
  • [s?] : s는 있을 수도, 없을 수도 있다는 의미입니다.
  • [:\/\/] : //가 있어야 한다는 의미입니다. \는 특수기호를 문자 그대로 받아들이라는 뜻입니다.
  • [)] : 그룹 지정을 마치기 위해 괄호를 닫습니다.
  • [(www\.)?] : www.이 있을 수도, 없을 수도 있다는 의미입니다.
  • [(.+)] : .는 모든 종류의 문자를 의미하고, +는 그것이 하나 이상 있어야 함을 의미합니다.

저희가 흔히 보는 URL을 충분히 설명하고 있는 것 같으신가요? 사실 위 표현식은 URL의 형식을 벗어나도 알아챌 수 있을만큼 민감하지 않습니다. 예를 들면 'http://누렁&이' 같은 데이터도 실제로는 URL이 아님에도 불구하고 패턴에 매칭되겠죠. 그러나, 데이터 형식의 무결성을 검사하는 것이 이번 정규식 작성의 목적은 아니었기 때문에 이 정도면 충분합니다.

Output

이제 패턴에 매칭된 입력 변수를 우리가 원하는 형태로 만들어야 합니다. 즉, URL에 'www.'가 있는 경우는 제거해야 합니다.

제가 작성한 정규 표현식은 URL을 다음과 같이 세 그룹으로 나누고 있습니다.

  1. (https?:\/\/)
  2. (www.)?
  3. (.+)

여기서 필요 없는 2번 그룹은 제외하고, 1번 그룹과 3번 그룹만 캡쳐하면 저희가 원하는 결과물을 얻을 수 있습니다. 그룹 캡쳐는 $ 기호와 그룹 번호를 이용하여 쉽게 할 수 있습니다.

$1$3

마치면서

지금까지 정규식 표(RegEx Table)을 이용하여 변수를 활용하여 입력된 데이터를 매칭시키고, 원하는 형태로 가공한 사례를 살펴보았습니다.

추후 더 재미있고 유용한 사례를 소개할 수 있었으면 좋겠습니다.

감사합니다.
nooreong 드림.

profile
nooreong의 velog입니다.

0개의 댓글