Editor 보민's comment
여러분은 구글 태그 매니저(GTM)라고 하면 어떤 것들이 생각나시나요? GTM은 구글 애널리틱스나 페이스북 픽셀을 연결할 때만 사용하는 도구라고 생각하시는 분들이 많을 것 같은데요. 사실 GTM은 훨씬 더 많은 일들을 할 수 있는 도구입니다. 서비스에 GTM이 세팅되어있다면, 그리고 약간의 개발 지식을 가지고 있다면 비개발 직군 종사자들도 개발자 없이 우리 서비스의 많은 부분을 커스텀하고 제어할 수 있어요.
이 글에서는 개발자 없이 오직 GTM만을 이용해서 채용공고 마감처리를 하고, 채용공고 상세 페이지 문구를 직군 맞춤으로 보여주는 코드를 만드는 재미있는 사례를 소개하고 있습니다. 읽다 보면 ‘GTM으로 이런 것까지 할 수 있다고?’라는 생각이 드실 거예요. 기발하고 다양한 GTM 활용법이 궁금하시다면, 이 글을 한 번 읽어보세요.
이 글의 원문은 포스타입 블로그 ‘GTM만 있으면 개발자가 아니어도 '이것'까지 할 수 있습니다'입니다.
스타트업은 언제나 바쁩니다. 하고 싶은 일도, 해야 할 일도 많습니다. 아마 이 글을 읽고 계신 여러분도 스타트업에서 일하고 계신다면 머릿속에 잔뜩 써내려 놓은 투두 리스트와 버킷 리스트가 상당하지 않을까요.
이제 뇌리에 뒤엉킨 할 일을 꺼내 줄을 세워봅시다. 아마도 이렇게 많은 일을 하고 싶고 또 해야 한다는 게 스타트업에서 일하는 특장점이 아닐까 하는데요. 애석하게도 개인이 느끼는 일의 우선순위 또는 욕심이 조직의 우선순위와 딱 맞아떨어지는 경우는 흔치 않습니다.
아마 이 글의 제목을 보고 클릭한 여러분은 개발자가 아닐 가능성이 높습니다. 그리고 스타트업에서 일하는 여러분이 하고 싶은 일, 해야 할 일의 상당 부분은 개발 리소스가 투입되어야 할 가능성이 높습니다. 여기서 딜레마가 생기겠죠. 개발자가 아닌 여러분이 언젠가 꼭 해보고 싶은 창의적 시도가 조직의 우선순위에서는 낮은 일이라면 그 일을 기약 없이 미뤄둘 수밖에 없는 걸까요.
이 글에서는 구글 태그 매니저(Google Tag Manager, 이하 GTM)를 활용해 개발자가 아닌 타 직군 동료가 통상 개발자의 도움이 필요했던 일을 개발 리소스 없이 할 수 있는 몇 가지 작업을 소개하고자 합니다.
GTM은 개발자가 아닌 여러분의 것입니다
![구글 마케팅 플랫폼의 생태계.](https://attachments.datarian.io/production-60f50f55-51cc-46ff-b9a7-1c82a23378ba-HdksZ2imAPMcY40oqR-_Zuie9UK3Te-YWnMRkRWIkSM.png)
GTM은 이미 잘 아실만한 구글 애널리틱스, 구글 옵티마이즈 등과 더불어 구글 마케팅 플랫폼(GMP) 생태계의 일부입니다. 구글은 GTM을 "웹사이트 또는 모바일 앱에서 코드 및 태그라고 통칭하는 관련 코드 조각을 쉽고 빠르게 업데이트할 수 있는 태그 관리 시스템"이라고 소개하고 있는데요. 조금 더 간단히 풀어 설명하자면 페이지 또는 화면에서 특정 상황(=트리거)이 발생했을 때 스크립트(=태그)를 자동 실행할 수 있도록 돕는 도구입니다.
- 총을 꺼낸다 : 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
결과는 어떨까요?!
![1️⃣ 태그 실행 전. HR 매니저 공고가 여전히 열려 있습니다.](https://attachments.datarian.io/production-ceab2b77-9a36-45c2-884a-6f8c4759ad8e-bN_o8ASCxI81WLXoAW6-FG-0QWQ2aMSHpsh8kp9dG28.png)
![2️⃣ 태그 실행 후. 페이지 로드 직후 공고 제목 앞에 [마감] 텍스트가 추가됩니다.](https://attachments.datarian.io/production-9c499122-62d4-4673-9a14-a59e17006a1e-S4bRCKD6Y7nRqgE378EYmBc3pn7SkOhR03jmi4-Gzi8.png)
![3️⃣ 태그 실행 후, 클릭 시 공고로 연결되지 않고 지원 마감 메시지가 뜹니다.](https://attachments.datarian.io/production-82a023d4-815b-48de-aa46-4228ff3a3382-hicTKiazWL8R0pvdadrDl4Y4ARNNUY5WMMNJSweaTQg.png)
물론 GTM의 맞춤 HTML 태그는 항상 최선의 방법은 아니지만, 이처럼 비상 상황에서 응급 처치를 하기에는 더없이 간편합니다.👍
저도 개인화 마케팅을 하고 싶습니다만🤯
네, HTML/CSS/JS에 관한 약간의 지식만 있다면 GTM을 좀 더 다채롭게 활용할 수 있습니다. 이번에도 맞춤 HTML 태그로 할 수 있는 또 다른 팁을 보여드리고자 합니다.
![포스타입 채용 정보 페이지. "포스타입과 함께 성장할 동료를 찾습니다."라는 메시지로 미래의 동료를 반기고 있습니다.](https://attachments.datarian.io/production-ccba6542-0808-4ab3-b548-8091dfc27739-wh3PVJ0DxygP485x6TgOKGb4wBGAyCrCPm-2fJtrWj0.webp)
포스타입은 직접 채용 정보 페이지를 운영하고 있지만, 채용 공고를 더 많은 분들이 보실 수 있도록 외부 채용 사이트에도 공고를 올리고 있습니다. 외부 채용 사이트에서 포스타입 채용 공고를 보고 포스타입에 대해 더 알아보기 위해 채용 정보 페이지를 확인하는 지원자들도 많은데요.
외부 채용 사이트에서 포스타입 채용 정보 페이지로 넘어온 분들을 좀 더 따뜻하고 살갑게 맞이하고 싶다면 어떤 일을 할 수 있을까요. 지원자가 외부 사이트에서 열람했던 채용 공고에 따라 환영 메시지를 다르게 띄워보면 어떨까요.
GTM이 제공하는 정규식 표(Regex table), 맞춤 HTML, 자바스크립트의 switch 조건문을 활용하면 매우 간단하게 개인화 마케팅이 가능합니다.
- 변수
- 변수 유형 : 정규식 표
- 입력 변수 : {{Referrer}}
- 정규식 표 : 리퍼러 패턴에 따라 다른 출력
![GTM의 정규식 표 변수 활용 예시.](https://attachments.datarian.io/production-c03b6482-9194-462a-bec5-b37f72231c46-c28s_A_xL1mZ0JI0KwK8ee90DpTUa_kVlTmgezjIYVA.webp)
먼저 리퍼러를 인식해 리퍼러 URL 패턴에 따라 각 직군마다 다른 출력을 갖도록 변수를 설정해줍니다. 예컨대 외부 채용 사이트의 프로덕트 매니저 공고 URL에 ‘/90020/’이 포함되어 있고, 해당 공고에서 포스타입 채용 정보 페이지로 넘어왔다면 이 변수는 pm을 출력합니다.
- 트리거
- 트리거 유형 : 페이지 뷰
- Page Path : 채용 정보 페이지의 페이지 경로
- 태그
- 태그 유형 : 맞춤 HTML
이제 switch 조건문을 맞춤 HTML로 삽입합니다. 리퍼러 URL의 패턴마다 다른 출력물을 가지는 ‘{{job posting referrer}}’ 변수에 따라 헤드라인의 "동료를" 부분을 변경해주는 조건문입니다.
이제 태그를 배포한 다음, 외부 채용 사이트의 PM 공고에서 채용 정보 페이지 링크를 클릭하면 짜잔.
![PM 공고에서 채용 정보 페이지로 넘어올 경우 "성장할 동료를 찾습니다"에서 "성장할 PM 동료를 찾습니다"로 변경됩니다. 엔지니어 공고인 경우, "성장할 개발자 동료를 찾습니다"로 변경되겠죠?](https://attachments.datarian.io/production-ade5eee5-931a-4af9-9cd9-fad84b64ab32-4-8YOjMcy4WXEJfUjo8uvbcGDebNTFz1Rmkr1M51cu4.webp)
이처럼 GTM을 활용하면 다양한 조건에 따라 세그먼트를 나눠 개인화 마케팅을 하는 것이 어렵지 않습니다.
(확률) 게임을 시작해볼까?🎲
이제 도전 정신과 아이디어가 샘솟지 않으시나요. 그런데 동시에 새로운 시도를 하는 게 두려운 기분이 들지도 모릅니다. 특히 이용자 다수에게 영향을 끼치는 태그를 단번에 적용하는 것은 여간 단단한 마음으로는 실험하기가 쉽지 않죠.
그렇다면 태그가 실행될 확률을 줄여 영향을 받는 이용자 수를 줄여보면 좀 더 가볍게 다양한 도전을 할 수 있지 않을까요.
![임의의 숫자 변수](https://attachments.datarian.io/production-78561261-41e6-4316-9769-6b62c16706ff-AVg_fqKWPcmVsabyiSVaLGkg9HWghHugRhwJEHCeoKE.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을 적극적으로 사용하고 있지 않던 분들에게 새로운 시도를 효율적으로 그리고 직접 해볼 수 있는 계기가 되었기를 바랍니다. 읽어주셔서 감사합니다. 🙇♂️
포스타입은 오늘도 다양한 직군의 동료를 찾고 있습니다. 이 글을 읽고 포스타입에 관심이 생기셨다면 포스타입의 조직 문화, 인재상, 채용 공고(클릭🖱️)를 확인해보세요!