GTM을 이용한 광고스크립트 설치 방법과 유의사항

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을 이용한 광고스크립트 설치 방법과 유의사항이었습니다.

Entrench Consulting
Scroll to Top