[GTM]6. 구글 태그관리자를 통해 네이버 공통/전환 스크립트 설치하기

# 2019-2020년 analyticsmarketing.co.kr 사이트에 올린 글을 재업로드한 글입니다.

네이버 검색광고는 국내에서 디지털 광고 시장 점유율이 가장 높은 광고 채널에 해당합니다. 그런만큼 대부분의 업종에 속하는 많은 광고주들이 네이버 광고를 이용합니다. 이번 글에서는 구글 태그관리자를 통해 네이버 검색광고의 성과 추적을 위해 사용되는 태그를 설치하는 방법을 설명하도록 하겠습니다.

네이버 공통 및 전환 태그

네이버 태그는 크게 1) 공통 스크립트와 2) 전환 스크립트 두 가지 유형으로 구분됩니다.

먼저 공통 스크립트는 네이버에서 무료로 제공하는 프리미엄 로그분석 서비스인 ‘네이버 애널리틱스’에서 사용되는 데이터를 수집하는 데 사용됩니다. 전환 스크립트는 네이버 검색광고의 성과를 추적하는 데 사용됩니다.

네이버 프리미엄 로그분석에 대한 더 자세한 설명과 스크립트 신청 방법은 아래 글 참조하시기 바랍니다.

참조1: 네이버 프리미엄 로그분석
참조2: 네이버 프리미엄 로그분석 신청 및 설치 방법

네이버 공통 스크립트 설치하기

태그관리자 ‘작업공간 > 태그’ 메뉴에서 우측 상단의 ‘새로 만들기’ 버튼을 클릭합니다. 이후 태그 구성과 트리거 구성 두 단계를 거쳐 태그를 생성합니다. 태그 생성이 완료되면 테스트(미리보기)를 거쳐 태그를 게시합니다.

태그 구성

Step 1. ‘태그 이름’ 지정: ‘네이버_공통’ (임의의 이름 지정)
Step 2. ‘태그 유형’ 선택: ‘맞춤 HTML’
Step 3. ‘맞춤 HTML 태그’ 입력: ‘네이버 공통 스크립트’

Step 1) ‘태그 이름’ 지정: ‘네이버_공통’ (임의의 이름 지정)

‘네이버공통’ 등 적절한 태그 이름을 지정합니다. 이어서 태그 구성 버튼을 클릭합니다.

Step 2) ‘태그 유형’ 선택: ‘맞춤 HTML’

기본 태그 템플릿에서 ‘맞춤 HTML’ 태그 유형을 선택합니다. 구글 애널리틱스 추적코드와 구글 애즈 리마케팅 및 전환 태그의 경우 (서비스 간 사전 상호 연동을 통해 제공되는) 태그 템플릿을 사용하는 반면, 네이버, 다음, 페이스북 등에서 사용되는 대부분의 다른 태그들은 ‘맞춤 HTML’ 태그 유형을 사용합니다.

Step 3) ‘맞춤 HTML 태그’ 입력: ‘네이버 공통 스크립트’

‘맞춤 HTML’ 태그 유형을 선택하면 위 화면에서와 같이 HTML 태그를 입력할 수 있는 편집 창이 나타납니다. 이 편집 창에 네이버 광고 계정에서 발급받은 ‘공통 스크립트’를 복사해서 붙여넣는 방식으로 추가합니다.

네이버 공통 스크립트 추가한 맞춤 HTML 태그의 모습입니다.

‘맞춤 HTML’ 태그 유형은 광고 성과 추적을 위해 사용되는 거의 대부분의 태그를 구글 태그관리자를 통해 설치할 수 있도록 하는 ‘만능’ 태그라고 보시면 됩니다. 웹사이트 소스 코드에서 직접 추가했던 기존 태그를 복사하여 위와 같이 HTML 편집창에 추가하면 소스 코드에 심은 것과 동일하게 태그가 작동됩니다.

트리거 구성

Step 1. ‘트리거’ 선택: ‘All Pages’

태그 구성이 완료되면 ‘트리거’ 항목에서 트리거를 선택합니다.

네이버 공통 스크립트의 경우 웹사이트의 모든 페이지에서 실행되도록 조건을 지정해야 하므로 기본 항목으로 제공되는 ‘All Pages’ 트리거를 선택합니다.

태그 구성과 트리거 구성을 완료한 네이버 공통 스크립트 설정 화면입니다.

네이버 전환 스크립트 설치하기

태그 구성

Step 1. ‘태그 이름’ 지정: ‘네이버_전환’ (임의의 이름 지정)
Step 2. ‘태그 유형’ 선택: ‘맞춤 HTML’
Step 3. ‘맞춤 HTML 태그’ 입력: ‘네이버 전환 스크립트’

Step 1) ‘태그 이름’ 지정: ‘네이버_전환’ (임의의 이름 지정)

‘네이버전환’ 등 적절한 태그 이름을 지정합니다.

Step 2) ‘태그 유형’ 선택: ‘맞춤 HTML’

기본 태그 템플릿에서 ‘맞춤 HTML’ 태그 유형을 선택합니다.

Step 3) ‘맞춤 HTML 태그’ 입력: ‘네이버 전환 스크립트’

‘맞춤 HTML’ 태그 유형을 선택하면 나타나는 편집 창에 네이버 광고 계정에서 발급받은 ‘전환 스크립트’를 추가합니다. 현재 네이버 프리미엄 로그 분석 서비스에서는 다음의 5가지 전환 유형을 제공하고 있습니다. 위 화면 좌측 파란색 박스에 표시된 숫자는 전환유형을, 우측 숫자는 전환가치를 나타냅니다. 네이버 광고에서 사용되는 전환유형은 아래와 같습니다.

1. 구매완료
2. 회원가입
3. 장바구니
4. 신청/예약
5. 기타

트리거 구성

Step 1. ‘트리거 생성’ 버튼 클릭
Step 2. ‘트리거 이름’ 지정: ‘구매전환’ (임의의 이름 지정)
Step 3. ‘트리거 유형’ 선택: ‘페이지뷰’
Step 4. ‘트리거 조건’ 지정: Page Path – 같음 – /order/order_result.html

Step 1) ‘트리거 생성’ 버튼 클릭

모든 페이지에서 실행되는 공통 스크립트 달리 전환 스크립트는 특정한 전환 페이지에서만 실행되도록 조건을 설정해야 합니다. 태그관리자에서는 모든 페이지(All Pages) 트리거 하나만 기본 값으로 제공되기 때문에 다른 트리거 조건을 설정하려면 하나 하나 개별적으로 생성해 주어야 합니다. 아래는 구매완료 전환 추적을 위한 트리거 예시입니다.

트리거 메뉴 클릭 후 표시되는 위 화면의 우측 상단에 있는 플러스 버튼을 클릭합니다.

Step 2) ‘트리거 이름’ 지정: ‘구매전환’ (임의의 이름 지정)

‘구매전환’ 등 적절한 트리거 이름을 지정합니다.

Step 3) ‘트리거 유형’ 선택: ‘페이지뷰’

‘트리거 구성’ 버튼 클릭 후 표시되는 위 화면에서 ‘페이지뷰’ 트리거 유형을 선택합니다. 페이지 URL을 조건으로 삼는 대부분의 트리거는 ‘페이지뷰-페이지뷰’ 트리거 유형을 사용합니다.

Step 4) ‘트리거 조건’ 지정: Page Path – 같음 – /order/order_result.html

이 단계에서는 트리거가 실행되는 구체적인 조건을 지정합니다.

‘이 트리거는 다음에서 실행됩니다’ 항목에서 ‘일부 페이지뷰’를 선택하면 좌측에서부터 변수, 연산자, 값을 선택/입력할 수 있는 세 개의 필드가 표시됩니다. 이들 항목을 갖고 구체적인 태그 실행 조건을 설정합니다.

– 변수(variable): Page Path
– 연산자(operator): 같음
– 값(value): /order/order_result.html

위 조건은 카페24 쇼핑몰의 주문완료 페이지를 예로 든 것입니다. 카페24 쇼핑몰의 경우 실제 주문완료 페이지 주소는 아래와 같습니다.

주문완료 페이지 주소: https://mysite.com/order/order_result.html?order_id=20191110-0000017

위 화면은 태그관리자 미리보기(preview/debug) 모드 화면을 캡쳐한 것입니다. 전체 페이지 주소를 의미하는 Page URL은 ‘https://mysite.com/order/order_result.html?order_id=20191110-0000017’로 표시됩니다. 상세 페이지 주소를 의미하는 Page Path 값은 앞 부분 웹사이트 도메인 주소 및 ? 이후의 파라미터 값이 생략되고 ‘/order/order_result.html’로 표시됩니다.

Page Path 변수를 선택하는 경우, ‘/order/order_result.html’를 변수 값으로 하여, ‘같음’, ‘포함’, ‘다음으로 시작’ 연산자를 모두 사용해도 좋습니다.

하지만 Page URL을 변수로 사용할 때는 ‘같음’ 연산자를 사용할 수 없습니다. 전체 주소에서 물음표 이후 표시되는 주문번호(‘?order_id=20191110-0000017’)가 결제가 이뤄질 때마다 달라지기 때문입니다. 따라서 이 경우는 ‘다음으로 시작’ 연산자에 ‘https://mysite.com/order/order_result.html’ 값을 입력하거나, ‘포함’ 연산자에 ‘/order/order_result.html’ 값을 사용할 수 있습니다.

또한 정규표현식을 사용할 수 있다면 보다 쉽게 페이지 기반의 트리거 조건을 설정할 수 있습니다. Page URL 또는 Page Path 변수에, 연산자로 ‘정규 표현식과 일치’를 선택한 후 \/order\/order_result.html’ 정도의 변수 값을 입력하면 됩니다.

물론 카페24 쇼핑몰 솔루션의 경우 ‘order_result’라는 표현이 들어가는 페이지가 구매완료 페이지 밖에 없습니다. 따라서 Page URL 또는 Page Path 변수에, 연산자로 ‘포함’ 또는 ‘정규 표현식과 일치’를 선택한 후, 값으로 ‘order_result’ 만을 입력해도 온전한 구매전환 데이터 수집이 가능합니다.

지금까지 동일한 결과를 낼 수 있는 다양한 트리거 설정 조건을 설명했습니다. 하지만 예시로 든 주소만 놓고 보더라도 여러 가지 다른 방법의 설정이 가능합니다. 따라서 여기서 제시된 트리거 조건을 문자 그대로 받아들이는 것이 아닌 조건을 적용하는 맥락을 이해하는 것이 중요합니다.

태그 구성과 트리거 구성을 완료한 네이버 전환 스크립트 설정 화면입니다.

네이버 공통 및 전환 스크립트 실행 순서 지정하기

네이버 공통 스크립트 설치를 통한 웹로그 분석 및 전환 스크립트 설치를 통한 광고 성과 측정을 하고자 할 때, 각 태그를 올바르게 설정해야 할 뿐만 아니라, 이 두 태그 간 실행 순서를 올바르게 지정해 주어야 합니다.

구체적인 실행 순서 지정 방법을 설명하기 전에 구글 태그관리자에서 설정된 태그들이 실행되는 작동되는 방법을 잠시 알아보도록 하겠습니다.

지금까지 세 차례 포스트에 걸쳐 태그관리자에서 다섯 가지의 태그를 설치하는 방법을 설명해 드렸습니다. 태그를 설치한 방법을 생각해 보면 웹사이트 소스 코드에 태그를 추가하는 방식으로 구글 태그관리자(GTM) 컨테이터 태그를 하나 심었고, 나머지 태그들은 태그관리자의 사용자 인터페이스 즉 인터넷 상에서 설치를 했습니다.

그러면 물리적으로 웹사이트에 심어진 태그는 GTM 컨테이너 태그 하나인데요, 이 태그가 실행될 때 그 안에 심어진 여러 태그들 중 어떤 태그가 가장 먼저 실행될까요? 다섯 개 태그 간에 실행 순서가 정해져 있을까요?

결론부터 말씀드리자면, 별도의 설정이 없는 경우 태그관리자에서 설정된 태그들 간에는 실행 순서가 존재하지 않습니다. 그리고 사실 보통의 경우 태그들 간의 실행 순서는 중요하지 않습니다.

태그의 주된 역할은 바로 웹사이트의 데이터를 수집해서 태그 발급 주체가 되는 서비스 즉 광고 플랫폼으로 이를 전송하는 것입니다. 이 때 위 화면에서와 같이 데이터가 전달되는 목적지가 각기 다르기 때문에 태그들 간 몇 초 정도의 실행 차이가 발생한들 크게 중요한 것은 아닙니다.

하지만 동일한 서비스에서 둘 이상의 태그를 사용할 때 종종 태그 간 실행 순서를 지정해 줄 필요가 있는데요, 대표적으로 네이버와 페이스북 광고에서 사용되는 태그를 예로 들 수 있습니다. 여기에서는 네이버 태그 간 우선순위를 지정하는 방법을 설명하고 페이스북 픽셀의 경우 추후 별도의 포스팅에서 설명할 예정입니다.

앞에서 다룬 네이버 공통 스크립트 설정 화면입니다. 스크립트 상단 주석을 보면 ‘단 전환페이지 설정값보다 항상 하단에 위치해야함‘이라는 문구가 포함되어 있습니다. 네이버 공통 스크립트는 네이버 전환 스크립트가 실행된 후에 실행되도록 해야 한다는 의미입니다.

그럼 구체적으로 태그관리자에서 태그 간 실행 순위를 지정하는 방법을 설명하도록 하겠습니다.

우선 위에서 설정한 네이버 전환 태그를 예시로 들겠습니다. ‘태그 구성’ 하단에 위치한 ‘고급 설정’을 클릭합니다.

위 화면은 고급 설정 메뉴에 포함된 항목을 보여줍니다. 구글 태그관리자에서는 1) 태그 실행 우선순위 및 2) 태그 시퀀싱 두 가지 기능을 통해 태그 간 실행 순서를 정할 수 있습니다.

1) 태그 실행 우선순위 설정하기

태그 실행 우선순위 기능은 여러 태그 간의 절대적 실행 순서를 지정하는 방법으로 우선순위 번호가 높은 태그가 먼저 실행됩니다. 1부터 10까지 우선순위 번호를 지정할 수 있으며, 아무것도 지정하지 않을 경우 우선순위는 0으로 설정됩니다.

위와 같이 특정 태그 실행 순위를 1로 지정하면 실행 순위를 지정하지 않은 다른 태그들 즉 0순위 태그들보다 먼저 실행됩니다.

네이버에서 제시하는 스크립트 설치 가이드에 따르면, 전환 스크립트가 공통 적용 스크립트보다 먼저 실행되어야 합니다. 따라서 위와 같이 ‘네이버_전환’ 태그 고급 설정에서 ‘태그 실행 우선순위’를 필드값을 1로 지정합니다.

태그 실행 우선순위 방법으로 태그 실행 순서를 지정한 네이버_전환 태그의 최종 태그 구성 화면입니다.

2) 태그 시퀀싱 설정하기

태그 시퀀싱 기능은 태그 간 상대적 실행 순서를 지정하는 방법으로 특정 태그를 기준으로 이전 혹은 이후에 실행할 태그를 지정할 수 있습니다.

위 화면은 네이버 전환 태그 설정 화면입니다. 전환 태그를 기준으로 이전 또는 이후에 실행할 태그를 정할 수 있습니다. 전환 태그가 먼저 실행되어야 하기에 ‘네이버_전환’ 태그가 실행된 후에 태그를 실행합니다’ 항목에 체크를 합니다. 이후 표시되는 ‘태그 선택’을 클릭합니다.

설정 중인 ‘네이버전환’ 태그를 제외하고 태그관리자에 설정된 모든 태그가 선택 대상 리스트에 뜹니다. 이 중 전환 태그 이후 실행할 ‘네이버공통’ 태그를 선택합니다.

위와 같이 선택한 태그가 표시됩니다.

태그 시퀀싱 방법으로 태그 실행 순서를 지정한 네이버_전환 태그의 최종 태그 구성 화면입니다.

3) 태그 실행 우선순위 vs 태그 시퀀싱

앞에서 설명한대로 ‘태그 실행 우선순위’는 태그를 실행하는 절대적 순서를, ‘태그 시퀀싱’은 상대적인 순서를 지정하는 방법입니다.

– 참조1: 태그 실행 우선순위(애널리틱스 고객센터
– 참조2: 태그 시퀀싱(애널리틱스 고객센터)

태그 실행 우선순위 기능을 통해 태그 간 순서를 지정하는 것은 어느 태그를 먼저 실행할 것인가를 정하는 것입니다. 하지만 이 경우 특정 태그의 실행(firing)이 앞서더라도 늦게 실행된 또 다른 태그의 로딩이 먼저 완료될 수도 있습니다. 다시 말해, 먼저 실행된 태그의 로딩이 먼저 완료되는 것을 보장하지는 않습니다.

반면 위와 같이 태그 시퀀싱은 기본적으로 하나의 태그 실행이 완료된 후 다른 태그를 실행하는 방식입니다. 따라서 좀 더 정확하게 태그의 실행 순서를 지정할 수 있습니다.

하지만 태그 시퀀싱 기능을 사용할 때는 유의해야 할 점이 있습니다. 태그 시퀀싱을 통해 이전 또는 이후에 실행될 태그를 선택할 경우 이전 또는 이후 태그의 트리거 조건과 상관 없이 기준이 되는 메인 태그가 실행될 때 선택된 태그들이 모두 실행된다는 점입니다.

앞에서 설명한 네이버 스크립트를 예로 들어 보겠습니다. 네이버 공통 스크립트를 만들면서 태그 시퀀싱 기능을 통해 전환 스크립트와의 실행 순서를 정할 경우 위와 같이 ‘네이버공통’ 태그 이전에 ‘네이버전환’ 태그가 실행되도록 설정할 수 있습니다.

이 경우 네이버 공통 태그와 네이버 전환 태그 간 실행 순서는 맞지만, 모든 페이지에서 실행되는 트리거 조건을 갖는 네이버 공통 태그가 실행될 때마마 네이버 전환 태그가 실행됩니다. 즉 전환 페이지에서만 실행되어야 하는 네이버 전환 태그가 모든 페이지에서 실행되는 매우 큰 문제가 발생하는 것입니다.

구매전환 페이지가 아닌 다른 일반 페이지에서 태그 실행 상태를 보여주는 미리보기 화면입니다. 전환 페이지가 아니기 때문에 구글애즈와 페이스북 전환 태그는 실행이 되지 않은 반면, 네이버공통 스크립트의 태그 시퀀싱 설정으로 인해 실제로 실행되지 않아야 할 상황에서 네이버전환 스크립트가 실행된 것을 확인할 수 있습니다. 자칫하면 무의미한 전환 데이터를 수집하게 될 수도 있는만큼 태그 시퀀싱 기능을 사용할 때는 주의를 기울여야 합니다.

또한 기본 태그 템플릿으로 만든 태그와 달리 ‘맞춤 HTML’ 유형의 태그는 태그 시퀀싱 기능으로 순서를 지정하더라도 이전 순서의 태그 실행이 완료된 후 이후 순서의 태그가 실행되는 것은 아닙니다. ‘맞춤 HTML’ 태그에서 태그 완료 순서를 담보하기 위해서는 별도의 설정을 해주어야 합니다. (참조: Understanding Tag Sequencing In Google Tag Manager – Simo Ahava). 이런만큼 개인적으로는 네이버와 페이스북 태그 순서를 지정할 때 태그실행 우선순위 기능을 사용할 것을 권장하는 편입니다.

지금까지 구글 태그관리자를 통해 네이버 공통 및 전환 스크립트를 설정하는 법과 태그의 실행 순서를 지정하는 방법을 알아봤습니다. 다음 글에서는 ‘맞춤 HTML’ 유형의 태그를 통해 페이스북 픽셀을 설치하는 방법을 다루도록 할 예정입니다. 궁금한 사항 등은 댓글로 남겨주시면 최대한 답변 드리도록 하겠습니다.

# 국내 대표적인 온라인마케팅 커뮤니티/매체인 아이보스에서 구글 애널리틱스 4(GA4) 강의를 진행하고 있습니다. 커리큘럼 등 자세한 사항은 아래 링크를 참조하세요.

GA4 실무과정: https://www.ibossedu.co.kr/edu-goods-380