GTM을 이용한 광고매체 스크립트 설치 방법과 유의사항
광고 매체 스크립트, 개발자가 아니더라도 설치할 수 있습니다!
안녕하세요 인트렌치 컨설팅 조유하 입니다.
쇼핑몰과 같은 사이트를 운영하는 많은 분들이 광고 성과 측정 또는 효과적인 광고를 위해 카카오, 페이스북 픽셀 등 광고 스크립트를 설치하는데요.
구글 태그 매니저(GTM)를 사용하면 개발팀 요청 또는 설치 의뢰를 맡기지 않더라도 쉽고 간단하게 광고 스크립트를 설치할 수 있습니다. 이러한 이유가 아니라도 스크립트 관리 차원에서 수정/삭제를 누군가에게 요청 없이 직접 진행할 수 있다는 장점이 있기 때문에 GTM을 이용하시는 것을 추천합니다.
물론 그러기 위해서는 먼저 GTM을 설치해야겠죠?
구글 태그 매니저 설치 가이드 링크 : https://support.google.com/tagmanager/answer/6103696?hl=ko&ref_topic=3441530
카카오 픽셀 생성 가이드 링크 : https://ad.kakao.com/contents/resource/12
페이스북 픽셀 생성 가이드 링크 : https://www.facebook.com/business/help/952192354843755
자, 그럼 구글 태그 매니저(GTM)가 사이트에 설치되어있다는 전제하에 페이스북과 카카오의 기본(Page view), 전환(Purchase) 픽셀을 예시로 개발자가 아니더라도 누구나 보고 따라 할 수 있도록 수집 정보를 최소화하여 진행해 보겠습니다.
기본 픽셀 태그부터 만들어 보겠습니다.
-기본 픽셀 태그 생성
-태그 유형 Custom HTML 선택
-발급받은 픽셀 코드 입력하기
이제 동작 시점을 정하는 트리거를 적용하겠습니다.
-기본적으로 생성되어 있는 모든 페이지를 추적하는 트리거를 선택합니다.
-태그 이름을 알아보기 쉽게 입력하고 저장을 합니다.
-카카오 픽셀도 같은 방법으로 생성합니다.
기본 스크립트만 설치하고 싶다면 여기서 GTM을 게시하면 끝입니다.
정말 간단하죠?
기본 픽셀을 특정 페이지에서만 동작시키고 싶다면 트리거에 추가로 설정이 필요한데
그 방법은 전환 태그를 생성하며 같이 설명하겠습니다.
다음은 전환 픽셀 코드 태그를 생성해 보겠습니다.
전환에서 유의해야 할 점은 태그가 동작해야 하는 특정 페이지 구분과 전환 측정을 위한 필수 설정값입니다.
[페이스북 구매 픽셀]
[카카오 구매 픽셀]
-전환 픽셀 태그 생성
페이스북 구매 픽셀에는 value에 총 주문 금액을 입력해야 하는데 숫자(소수점 가능)만 입력해야 합니다.
이해를 돕기 위해 임의로 생성한 테스트용 쇼핑몰 주문 완료 페이지 화면을 캡처했습니다.
[테스트용 쇼핑몰 주문 완료 페이지 화면 캡처]
이 페이지에서 총 결제금액 12500을 픽셀 코드에 입력해야 합니다.
다음과 같이 그대로 따라 해 보세요.
1) 12,500원에 마우스 커서를 올려놓고 마우스 오른쪽 버튼 > 검사 클릭
이러한 화면이 나타나게 됩니다.
2) 마우스 오른쪽 버튼 > Copy > Copy selector 클릭
3) Console에서 $(‘붙여넣기’).text().replace(/[^\d]/g,’’); 입력 후 엔터
붙여 넣기를 하면 2)에서 복사한 내역을 불러옵니다.
이렇게 하면 특정 영역의 값을 출력할 수 있습니다.
우리가 원하는 12500이 출력된 것을 볼 수 있습니다.
이것을 이용해 구매 픽셀에 적용합니다.
4) 태그 생성
캡처와 같은 형식으로 입력합니다.
4) 트리거 생성 (특정 페이지를 설정)
생성할 트리거 유형 DOM Ready
pageview 트리거 동작 순서 : 1.Page View 2. DOM Ready 3. Window Loaded
테스트 쇼핑몰 주문 완료 페이지 URL
http://gtmTest.godomall.com/order/order_end.php?orderNo=2009021244309584
page hostname : gtmTest.godomall.com
page path : /order/order_end.php
확인하는 방법: F12 개발자 도구 Console에서 location.pathname, location.hostname을 입력하면 확인할 수 있습니다.
반응형 홈페이지가 아니라면 URL로 PC / MOBILE 구분이 가능하며,
URL이 다르면 구조도 다를 수 있기 때문에 태그와 트리거를 각각 생성해야 할 수 있으므로 반드시 확인해야 합니다.
5) 트리거 적용
카카오 구매 픽셀 태그
4)에서 생성한 트리거를 이용합니다.
이제 모든 세팅이 끝났습니다.
다음은 생성한 태그가 제대로 동작하는지, 오류는 없는지 확인해 보겠습니다.
* 오류 확인 : F12 개발자 도구 Console
[오류 예시]
이러한 오류가 발생하지 않는지 반드시 확인해 주세요.
(빨간색 박스 안의 gtm.js?id=GTM-............ 은 GTM에서 생성한 태그에서 오류가 발생한다는 뜻입니다.)
오류는 사이트 내의 기능에 영향을 끼칠 수 있으므로 반드시 확인해야 합니다.
에러 없이 태그가 설정한 대로 동작했습니다.
( PagaView 는 모든 페이지, Purchase 는 주문 완료 페이지에서 동작합니다. )
태그가 동작하지 않는다면 저번에 등록한 게시글을 참고해 주세요. > GTM 태그가 동작하지 않는 원인 찾기
이렇게 개발지식이 없더라도 무작정 따라 하면 광고 스크립트를 설치할 수 있습니다.
오류가 생긴다면 태그를 삭제 또는 중지하여 바로 관리할 수 있습니다.
마지막으로 유의할 점을 정리해 보겠습니다.
1. 트리거 생성 설정을 위해 PC / MOBILE 웹의 URL 확인 (다르면 태그 트리거를 각각 생성해야 함.)
2. 픽셀 코드에 필수로 입력해야 하는 부분 확인
3. 오류(에러)가 발생하지 않는지 확인
이 모든 게 확인되었다면 이제 GTM을 게시해 주세요.
여기까지 GTM을 이용한 광고 스크립트 설치 방법과 유의사항이었습니다.
