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

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

2020년 9월 21일 Data/Tag Management 0

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

 

Do NOT follow this link or you will be banned from the site!