GTM만 있으면 개발자가 아니어도 '이것'까지 할 수 있습니다
Editor 보민's comment
여러분은 구글 태그 매니저(GTM)라고 하면 어떤 것들이 생각나시나요? GTM은 구글 애널리틱스나 페이스북 픽셀을 연결할 때만 사용하는 도구라고 생각하시는 분들이 많을 것 같은데요. 사실 GTM은 훨씬 더 많은 일들을 할 수 있는 도구입니다. 서비스에 GTM이 세팅되어있다면, 그리고 약간의 개발 지식을 가지고 있다면 비개발 직군 종사자들도 개발자 없이 우리 서비스의 많은 부분을 커스텀하고 제어할 수 있어요.
이 글에서는 개발자 없이 오직 GTM만을 이용해서 채용공고 마감처리를 하고, 채용공고 상세 페이지 문구를 직군 맞춤으로 보여주는 코드를 만드는 재미있는 사례를 소개하고 있습니다. 읽다 보면 ‘GTM으로 이런 것까지 할 수 있다고?’라는 생각이 드실 거예요. 기발하고 다양한 GTM 활용법이 궁금하시다면, 이 글을 한 번 읽어보세요.
이 글의 원문은 포스타입 블로그 ‘GTM만 있으면 개발자가 아니어도 '이것'까지 할 수 있습니다'입니다.
스타트업은 언제나 바쁩니다. 하고 싶은 일도, 해야 할 일도 많습니다. 아마 이 글을 읽고 계신 여러분도 스타트업에서 일하고 계신다면 머릿속에 잔뜩 써내려 놓은 투두 리스트와 버킷 리스트가 상당하지 않을까요.
이제 뇌리에 뒤엉킨 할 일을 꺼내 줄을 세워봅시다. 아마도 이렇게 많은 일을 하고 싶고 또 해야 한다는 게 스타트업에서 일하는 특장점이 아닐까 하는데요. 애석하게도 개인이 느끼는 일의 우선순위 또는 욕심이 조직의 우선순위와 딱 맞아떨어지는 경우는 흔치 않습니다.
Important Benedict Cumberbatch GIF by BBC - Find & Share on GIPHY
아마 이 글의 제목을 보고 클릭한 여러분은 개발자가 아닐 가능성이 높습니다. 그리고 스타트업에서 일하는 여러분이 하고 싶은 일, 해야 할 일의 상당 부분은 개발 리소스가 투입되어야 할 가능성이 높습니다. 여기서 딜레마가 생기겠죠. 개발자가 아닌 여러분이 언젠가 꼭 해보고 싶은 창의적 시도가 조직의 우선순위에서는 낮은 일이라면 그 일을 기약 없이 미뤄둘 수밖에 없는 걸까요.
이 글에서는 구글 태그 매니저(Google Tag Manager, 이하 GTM)를 활용해 개발자가 아닌 타 직군 동료가 통상 개발자의 도움이 필요했던 일을 개발 리소스 없이 할 수 있는 몇 가지 작업을 소개하고자 합니다.
GTM은 개발자가 아닌 여러분의 것입니다
gtm1.png
GTM은 이미 잘 아실만한 구글 애널리틱스, 구글 옵티마이즈 등과 더불어 구글 마케팅 플랫폼(GMP) 생태계의 일부입니다. 구글은 GTM을 "웹사이트 또는 모바일 앱에서 코드 및 태그라고 통칭하는 관련 코드 조각을 쉽고 빠르게 업데이트할 수 있는 태그 관리 시스템"이라고 소개하고 있는데요. 조금 더 간단히 풀어 설명하자면 페이지 또는 화면에서 특정 상황(=트리거)이 발생했을 때 스크립트(=태그)를 자동 실행할 수 있도록 돕는 도구입니다.
Rihanna GIF - Find & Share on GIPHY
총을 꺼낸다 : GTM 컨테이너 버전 배포
장전 : 사용자의 페이지 로드
격발 : 트리거 발생
발사 : 태그 실행
트리거와 태그를 GTM 클라이언트에서 업데이트할 수 있는 게 가장 큰 장점입니다. 그래서 개발자가 GTM 코드 스니펫만 페이지에 넣어놓는다면 개별 스크립트를 개발하거나 일일이 배포할 필요 없이 클라이언트에서 트리거와 태그를 변경할 수 있습니다. 네, GTM은 그래서 개발자를 위한 개발 도구보다는 여러분 모두를 위한 로코드 마케팅 도구에 가깝습니다.
아직 GTM이 익숙하지 않다면 아래 문서를 참고해주세요.
GTM 고객센터 : GTM 시작하기 가이드입니다.
GTM 개발 문서 : GTM에 대해 더 자세히 알고 싶거나 트러블슈팅이 필요하다면 개발 문서를 확인해보세요.
Simo Ahava : GTM 구루로 유명한 테크니컬 마케터 Simo Ahava의 블로그입니다. GTM 활용의 정석을 소개합니다
아래부터의 내용은 GTM에 관한 기본적인 사항을 숙지한 것을 전제로 작성했습니다.
GTM으로 이런 것도 할 수 있습니다
이미 많은 분들께서 구글 애널리틱스, 채널톡 설치 등을 위해 GTM을 활용하고 계실 텐데요. 튜토리얼 보고 픽셀 설치하는 데만 쓰기에는 GTM은 너무나 다재다능한 도구입니다. 지금 당장 적용해볼 수 있는 GTM 활용 팁을 소개합니다.
채용이 마감되었는데 개발자가 이미 퇴근했다😱
포스타입은 다양한 직군을 상시 채용하고 있고, 지원 기한을 따로 정해두지 않고 있는데요. 우리에게 잘 맞는 동료를 만나게 되면 아쉽게도 채용 지원을 수시로 마감하고 있습니다. 그러다 보니 채용 지원을 제때 마감하는 일은 중요합니다. 채용 니즈가 없음에도 불구하고 지원자가 그 사이에 지원을 하게 되면 서로 곤란한 상황이 생길 수도 있으니까요.
그런데 이런 상황을 가정해봅시다. 지금 당장 채용 지원을 마감해야 하는데 이 일을 해줄 개발자가 휴가 중이거나 이미 퇴근했다면요.
GTM은 웹페이지 내에 임의의 HTML 코드를 삽입하는 '맞춤 HTML' 태그 유형을 제공하고 있습니다. 이를 활용해 간단한 자바스크립트를 삽입하면 웹페이지에 로드된 오브젝트를 자유자재로 변경할 수 있습니다.
트리거
트리거 유형 : 페이지 뷰
Page Path : 공고의 상태를 변경하려는 페이지 경로
태그
태그
유형 : 맞춤 HTML

<script>
  var elements = document.querySelectorAll(".job-grid-list");    
  for (i = 0; i < elements.length; ++i) {
    var str = elements[i].innerHTML;
    elements[i].innerHTML = str.replace("HR 매니저", "[마감] HR 매니저");
  }
</script>


<script>
  var a = document.querySelector('a[href="https://career.greetinghr.com/o/NDE0Mw.JwhWvncnp4VldFgmEWc6Jp_IycI"]');
  if (a) {
    a.removeAttribute('href')
  }
  
  function display() {
    alert('지원이 마감되었습니다.');
  }
  a.addEventListener('click',display);
</script>
결과는 어떨까요?!
postype1.png
postype2.png
postype3.png
물론 GTM의 맞춤 HTML 태그는 항상 최선의 방법은 아니지만, 이처럼 비상 상황에서 응급 처치를 하기에는 더없이 간편합니다.👍
저도 개인화 마케팅을 하고 싶습니다만🤯
네, HTML/CSS/JS에 관한 약간의 지식만 있다면 GTM을 좀 더 다채롭게 활용할 수 있습니다. 이번에도 맞춤 HTML 태그로 할 수 있는 또 다른 팁을 보여드리고자 합니다.
포스타입 페이지1.webp
포스타입은 직접 채용 정보 페이지를 운영하고 있지만, 채용 공고를 더 많은 분들이 보실 수 있도록 외부 채용 사이트에도 공고를 올리고 있습니다. 외부 채용 사이트에서 포스타입 채용 공고를 보고 포스타입에 대해 더 알아보기 위해 채용 정보 페이지를 확인하는 지원자들도 많은데요.
외부 채용 사이트에서 포스타입 채용 정보 페이지로 넘어온 분들을 좀 더 따뜻하고 살갑게 맞이하고 싶다면 어떤 일을 할 수 있을까요. 지원자가 외부 사이트에서 열람했던 채용 공고에 따라 환영 메시지를 다르게 띄워보면 어떨까요.
GTM이 제공하는 정규식 표(Regex table), 맞춤 HTML, 자바스크립트의 switch 조건문을 활용하면 매우 간단하게 개인화 마케팅이 가능합니다.
변수
변수 유형 : 정규식 표
입력 변수 : {{Referrer}}
정규식 표 : 리퍼러 패턴에 따라 다른 출력
GTM.webp
먼저 리퍼러를 인식해 리퍼러 URL 패턴에 따라 각 직군마다 다른 출력을 갖도록 변수를 설정해줍니다. 예컨대 외부 채용 사이트의 프로덕트 매니저 공고 URL에 ‘/90020/’이 포함되어 있고, 해당 공고에서 포스타입 채용 정보 페이지로 넘어왔다면 이 변수는 pm을 출력합니다.
트리거
트리거 유형 : 페이지 뷰
Page Path : 채용 정보 페이지의 페이지 경로
태그
태그 유형 : 맞춤 HTML
이제 switch 조건문을 맞춤 HTML로 삽입합니다. 리퍼러 URL의 패턴마다 다른 출력물을 가지는 ‘{{job posting referrer}}’ 변수에 따라 헤드라인의 "동료를" 부분을 변경해주는 조건문입니다.
<script>
  var a = {{job posting referrer}};
  var elements = document.querySelectorAll(".hero-headline");
  
  switch (a) {
    case 'eng':
        for (i = 0; i < elements.length; ++i) {
          var str = elements[i].innerHTML;
          elements[i].innerHTML = str.replace("동료를", "개발자 동료를");}
        break;
    case 'pm' :
        for (i = 0; i < elements.length; ++i) {
          var str = elements[i].innerHTML;
          elements[i].innerHTML = str.replace("동료를", "PM 동료를");}
        break;
    case 'mkt' :
        for (i = 0; i < elements.length; ++i) {
          var str = elements[i].innerHTML;
          elements[i].innerHTML = str.replace("동료를", "마케터 동료를");}
  }
</script>
이제 태그를 배포한 다음, 외부 채용 사이트의 PM 공고에서 채용 정보 페이지 링크를 클릭하면 짜잔.
포스타입 페이지1.webp
이처럼 GTM을 활용하면 다양한 조건에 따라 세그먼트를 나눠 개인화 마케팅을 하는 것이 어렵지 않습니다.
(확률) 게임을 시작해볼까?🎲
이제 도전 정신과 아이디어가 샘솟지 않으시나요. 그런데 동시에 새로운 시도를 하는 게 두려운 기분이 들지도 모릅니다. 특히 이용자 다수에게 영향을 끼치는 태그를 단번에 적용하는 것은 여간 단단한 마음으로는 실험하기가 쉽지 않죠.
그렇다면 태그가 실행될 확률을 줄여 영향을 받는 이용자 수를 줄여보면 좀 더 가볍게 다양한 도전을 할 수 있지 않을까요.
임의의 숫자변수.webp
이것 역시 매우 간단합니다.
GTM은 임의의 숫자(Random number)라는 변수 유형을 제공하고 있습니다. 0부터 2147483647(2³¹-1) 사이의 숫자를 무작위로 출력하는 변수인데요. 무작위 숫자 중 특정 숫자 요건이 나타날 확률을 활용해 태그 실행 확률을 줄일 수 있습니다.
50% 확률로 태그를 실행하고자 한다면 : 숫자의 끝자리가 4 이하(0~4)인 경우 또는 숫자가 1073741823 이하인 경우
10% 확률로 태그를 실행하고자 한다면 : 숫자의 끝자리가 무조건 1인 경우 또는 숫자가 214748364 이하인 경우
이처럼 적용하려는 태그의 트리거에 '일부 조건'으로 임의의 숫자 변수 조건을 추가하면 아주 빠르게 소규모 테스트를 실행할 수 있습니다. 예컨대 서비스 메인 페이지에 마케팅 모달을 띄우는 실험을 할 때, 전체 이용자에게 모달을 띄워보는 것보다는 임의의 숫자 요건으로 일부 이용자에게만 모달을 띄워 퍼포먼스를 확인한 후 임의의 숫자 요건을 제거하면 사용자 경험을 해칠 리스크 없이 마케팅을 진행할 수 있겠죠.
개발 지식 없이도 GTM을 활용해 간편하게 서비스에 변주를 줄 수 있는 팁을 소개해드렸는데요. 이외에도 GTM으로 할 수 있는 일들은 무궁무진합니다. 예컨대,
쿠키 설치 : 갈수록 고객에 관한 1차 데이터와 그 활용이 중요해지고 있는데요. GTM으로 특정 행동을 한 이용자에게 1차 쿠키를 심어 마케팅에 활용할 수도 있습니다. 이 튜토리얼을 확인해보세요.
구조화된 데이터 : 웹페이지가 구조화된 데이터(Structured Data)를 제공하면 SEO 측면에서 탁월한 성과를 낼 수 있습니다. GTM을 활용하면 개발 지식 없이도 동적 변수로 손쉽게 구조화된 데이터를 자동 삽입할 수 있습니다.
번역기 리스너 : 포스타입은 다양한 국적의 이용자가 자주 찾는 서비스인데요. 서비스를 현지화한다면 과연 어떤 언어를 먼저 제공해야 할까요. 번역기 리스너를 통해 이용자가 자주 이용하는 구글 번역기 언어를 알아낼 수 있습니다.
아직 GTM을 적극적으로 사용하고 있지 않던 분들에게 새로운 시도를 효율적으로 그리고 직접 해볼 수 있는 계기가 되었기를 바랍니다. 읽어주셔서 감사합니다. 🙇‍♂️
Trying Your Best Kimmy Schmidt GIF by Unbreakable Kimmy Schmidt - Find & Share on GIPHY
포스타입은 오늘도 다양한 직군의 동료를 찾고 있습니다. 이 글을 읽고 포스타입에 관심이 생기셨다면 포스타입의 조직 문화, 인재상, 채용 공고(클릭🖱️)를 확인해보세요!

[실무 팁] 사실 대부분의 보고서는 이 설정에 영향을 받지 않아요

실무 GA4 필수 설정 (4) 데이터 보관 기간 늘리기

conversion_type

시리즈 내 순서

conversion_text

멤버 전용

대표 이미지

공개 가능

작성일

예상 읽기 시간

전환 텍스트

글쓴이

시리즈

상단 노출

전환 유형

요약

제목

이번 글에서는 UA에서 GA4로 전환을 고민하고 계시는 분들에게, GA4와 UA의 차이점에 대해서 알려드리려고 합니다.

UA vs GA4 달라진 점 6가지

GTM은 개발자가 아닌 여러분의 것입니다

GTM으로 이런 것도 할 수 있습니다

마케팅, 운영, 기획, 스태프 직군 여러분, 구글 태그 매니저 하나면 됩니다

GTM만 있으면 개발자가 아니어도 '이것'까지 할 수 있습니다

Contents

함께 읽어보면 좋은 글

GA4 보고서의 기초 (4) 실시간 보고서

GA4 버튼 클릭 데이터 수집하기

기여 분석 (3) GA4 기여 분석 모델 지원 중단 (feat. 쿠키리스)

데이터 분석 소식을
한 달에 한 번 받아보세요