[GTM] 서버사이드태깅(Server side tagging on Google Tag Manager) - 1. 컨테이너 생성

 

GTM 서버사이드태깅

서버사이드 태깅에 대한 설명은 공식문서(developers.google.com/tag-manager/serverside)에서 발췌한 내용입니다. 서버사이드 태깅 테스트는 문서 순서대로 진행하였습니다.

Server-side tagging allows Tag Manager users to move measurement tag instrumentation out of their website or app and into server-side processing via Google Cloud. Server-side tagging offers a few advantages over client-side tags

Server-side Container 선택시 Google Cloud 환경에 구성해야 하며, Billing Account도 설정되어 있어야 합니다. 실제 GCP 인프라를 사용하는 것이라 비용발생도 고려하시기 바랍니다.

GTM 서버사이드 태깅을 고려하는 이유(장점)

1. Improved performance: Fewer measurement tags in website or app means less code to run client-side. 

• 경험상 이 부분이 이해가 가는 이유가 특정 페이지에 태그(GA 이벤트 태그, 3rd party 태그)를 많이 달았더니 페이지로딩이 엄청나게 느려지더군요. (웹환경에서 태그별 로딩이 순차적으로 되므로 마케팅 또는 분석목적으로 많은 태깅을 하면 사용자경험에 안좋은 영향을 줄 수 있습니다.)

2. Better security: Visitor data is better protected by collecting and distributing data in a customer managed server-side environment. Data is sent to a Google Cloud instance where it is then processed and routed by other tags.

---

Server-side tagging 아키텍쳐

이 아키텍쳐에서 중요한 부분이 바로 'Client(아래 그림 Server container)'인데, User Device(브라우저, 앱)에서 데이터를 받아 Event 형태로 타겟서버(GA, Ads, 3rd party analytics)에 전달해주는 기능을 수행한다.

서버 컨테이너를 사용한 태깅 환경설정

서버사이드 태그는 '샌드박스 Javascript'를 사용하여 구현해야 한다. (Tags are built using the sandboxed Javascript technology.)

const sendPixel = require('sendPixel');
const encodeUri = require('encodeUri');
const encodeUriComponent = require('encodeUriComponent');

let url = encodeUri(data['url']);

if (data['useCacheBuster']) {
  const encode = require('encodeUriComponent');
  const cacheBusterQueryParam = data['cacheBusterQueryParam'] || 'gtmcb';
  const last = url.charAt(url.length - 1);
  let delimiter = '&';
  if (url.indexOf('?') < 0) {
    delimiter = '?';
  } else if (last == '?' || last == '&') {
    delimiter = '';
  }
  url += delimiter +
      encodeUriComponent(cacheBusterQueryParam) + '=' + encodeUriComponent(data['randomNumber']);
}
sendPixel(url, data['gtmOnSuccess'], data['gtmOnFailure']);

The server receives web requests from the user's device and transforms those requests into events.

---

 

실습을 위해 필요한 환경

1. 웹 또는 앱 - 클라이언트용 GTM을 적용하기 위한 환경이고, 저는 일단 Node.js + Bootstrap 환경의 서버를 만들었어요. 

2. GTM Container - Client용, Server사이드용 총 2개의 컨테이너가 필요합니다.

3. GCP (Google Cloud Platform) - 편의상 App Engine(서버사이드 태깅이 동작하는 웹 어플리케이션 서버에 해당)을 사용합니다. 신규 서버사이드 컨테이너 생성시 별도 서버 구성(Manual provision Tagging Server) 방식을 선택해도 됩니다.

---

GTM 서버사이드 컨테이너 생성

Server-side container를 생성하면, 컨테이너를 배포할 GCP서버를 준비해야 합니다. (Deploy the container to a GCP server.)

 

1. Install Google Tag Manager

서버설정(Set up your tagging server)시 아래 두가지 방식 중에 선택

- Automatically provision tagging server (선택) : 아래 이미지 파란 버튼을 눌러 자동으로 태깅서버를 생성합니다.

- Manually provision tagging server: GCP App Engine 설정 가이드에 따라 직접 태깅서버를 생성할 수 있습니다.

태깅서버선택

서버생성(Creating a tagging server)

서버생성중

서버가 생성됨

생성이 완료되면 아래와 같은 내용을 확인할 수 있습니다.

- 컨테이너 구성
- Google Cloud Platform 프로젝트 ID
- 작성자
- 기본 URL: AppEngine URL이 자동생성

서버생성완료

---

웹사이트 컨테이너 생성

Website, 즉 클라이언트 쪽에 해당하는 컨테이너로, 실제 유저 데이터를 수집하는 태그가 추가되는 영역입니다.

 

적용순서

1. 사이트에 적용할 Container (예를 들어, Jason Singular Clientside Tag)를 생성하고, Target platform은 Web으로 선택합니다.

서버사이드 태깅을 적용할 때 컨테이너가 두개가 필요하여 헷갈리지 않도록 컨테이너명(Container name)에 'Clientside'란 이름을 함께 추가하였습니다.

컨테이너 생성

2. Container Script를 내 HTML 소스에 적용합니다.

아래 샘플코드는 Node Express.js 프로젝트 생성시 제공하는 pug js 형식입니다. 기존 컨테이너 script를 HTML2Jade에서 복사하면 pug js로 변환이 가능합니다.

head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
    meta(name='description', content='')
    title DEFAULT
    // Bootstrap core CSS
    link(href='/static/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet', integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T', crossorigin='anonymous')
    link(href='/static/font-awesome/css/font-awesome.min.css', rel='stylesheet')
    link(href='/stylesheets/datepicker.css', rel='stylesheet')
    
    block append-header
    
    style.
      .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

    // Google Tag Manager
    script.
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');
    // End Google Tag Manager
  body
    // Google Tag Manager (noscript)
    noscript
      iframe(src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX' height='0' width='0' style='display:none;visibility:hidden')
    // End Google Tag Manager (noscript)