며칠 전부터 페이스북을 이용한 광고 데이터 연동 작업을 마무리하고 새로운 솔루션을 만들어야 할 일이 생겼다. REST API Server는 처음 사용해보는 Flask를 이용해 구현하고 있는데 이건 다음에 더 이야기 하도록 하자. 이 솔루션은 GTM(Google Tag Manager)과 유사하게 팀 내에서 태그들을 관리할 수 있는 서비스이다. 특히 '전환 스크립트'에 중점을 두는 것이 이 솔루션의 중요한 점이다.

사실 인턴을 시작하고 나서 전환 스크립트가 언급되는 건 여러번 들었지만 이에 대해 자세히 알 생각은 하지 않았다. 개발자는 주어진 요구사항대로 구현하는 것이 큰 부분을 차지한다고 생각했기 때문이다. 하지만 팀 규모가 크지 않고 인턴 두명이서 진행하는 프로젝트이다 보니 사전지식이 없으니 핵심기능인 '태그 관리'를 어떻게 해야하는지 막막한 상태이다. 그렇기 때문에 이 프로젝트를 이해하면서 구현하기 위한 필수 사전지식인 전환 스크립트에 대해 이 글에 정리해보고자 한다. 대상 사이트는 이커머스 사이트라고 가정하고 시작해보자

전환 스크립트란?

전환 스크립트가 무엇인지 부터 짚고 넘어가자. 사실 전에 한번 언급한 적이 있다. 다시 정리하자면 전환 스크립트 일종의 코드 조각인데, 웹사이트의 특정 상황에서 실행되어 특정한 동작을 수행한다. 예를들어 웹페이지를 방문하거나, 특정 버튼을 클릭하는 등의 이벤트가 발생하면 전환 스크립트가 실행되는 것이다. 전환은 마케팅에 호응해서 목적에 맞는 행위(조회, 구매 등)를 한 것이고 이러한 내용을 수집하기 위한 웹 페이지내에 코드가 바로 전환 스크립트가 되겠다. 아마 다음과 같은 형태를 가질 수 있을 것이다.

<html>
  <head>
    <title>전환 스크립트 예제</title>
    <script>
      function myConversionFunction() {
        // 전환 스크립트의 동작 코드
      }
    </script>
  </head>
  <body>
    <h1>전환 스크립트 예제 페이지</h1>
    <p>이 페이지는 전환 스크립트를 사용하는 예제 페이지입니다.</p>
    <button onclick="myConversionFunction()">전환 발생</button>
  </body>
</html>

해당 코드는 전환 스크립트를 직접 포함하고 있는 형태이다. 그렇기 때문에 웹페이지가 로드될 때 전환 스크립트도 함께 로드된다.

<html>
  <head>
    <title>전환 스크립트 예제</title>
  </head>
  <body>
    <h1>전환 스크립트 예제 페이지</h1>
    <p>이 페이지는 전환 스크립트를 사용하는 예제 페이지입니다.</p>
    <button id="myButton">전환 발생</button>
    <script>
      document.getElementById("myButton").addEventListener("click", function() {
        var script = document.createElement("script");
        script.src = "http://example.com/conversion.js";
        document.head.appendChild(script);
      });
    </script>
  </body>
</html>

해당 코드에서는 '전환 발생' 버튼을 클릭할 때 url을 통해 전환 스크립트를 로드하도록 한다. 이 방법은 전환 스크립트를 웹페이지와 분리시키고 로드 시간도 최적화 할 수 있다.

일단 대략 전환 스크립트라는게 어떤 것인지 감은 잡힌 것 같다. 전환 스크립트를 통해 전환 이벤트를 감지하고 이에 대응하는 동작을 수행하게 되는 것이다. 그 동작은 구매 완료 메세지를 표시하거나, 구매 완료 정보를 서버로 보내는 등 매우 다양하다. 이러한 동작 마케팅 도메인에서 중요한 것은 바로 제품 검색/클릭/구매 횟수나 발생 시각, 사용자 정보 등을 이용해 사용자 동작을 추적하고 사용자의 행동 패턴을 분석하는 것이다. 이를 통해 어떤 상황에서 전환율이 높은지 등을 파악하고 마케팅 전략을 최적화 할 수 있기 때문이다.

분석 도구에서의 전환 스크립트

그럼 마케터들이 직접 코딩을 통해 이벤트 리스너와 이에 대응하는 전환 스크립트를 손수 작성하고 수집한 정보를 통해 분석을 하는 것까지 모두 해야할까? 그건 마케터 입장에서 큰 부담이 될 것이다. 그렇기 때문에 Google Analytics(GA), Facebook Pixel, Kakao Moment 등의 분석 도구에서는 전환 스크립트를 제공한다. 이것을 사용하면 직접 전환 스크립트를 작성할 필요가 없다. 예를 들어 GA에서 제공하는 전환 스크립트를 삽입하고 이후 해당 코드가 실행이 되면 GA서버로 전환 관련 데이터들이 전송되고 이후 GA에서 반영된 내용을 확인하면서 분석할 수 있는 것이다.

물론 이런 스크립트를 만들기 위해서는 파라미터가 필요하다. 그리고 이런 파라미터는 분석 도구마다 이름이나 요구되는 종류가 상이하다. 그렇기 때문에 각 분석 도구에서는 이런 파라미터를 설정할 수 있는 ui를 제공한다. ui를 통해 파라미터를 설정하고 생성된 코드를 웹페이지에 복붙함으로써 전환 스크립트를 쉽게 적용할 수 있다. GA를 예시로 확인해보자. 아마 분석 도구마다 그 용어는 다를지라도 대략적인 구조는 비슷할 것이다.

GA

추적 태그

GA에서 설정을 마치면 처음에는 추적 태그라는 것이 생성된다.

<!-- GA 추적 태그 코드 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

추적 태그는 방문자의 행동 데이터(방문자 수, 페이지 뷰, 이탈률 등)를 추적하고 분석하는데 사용된다. 그리고 코드를 정리해보자면 다음과 같다.

dataLayer 변수가 있는지 확인하고 없다면 빈 배열을 할당한다. 이 변수는 GA 추적 태그에 사용되는 전역 변수인데 추적 정보를 저장한다.
gtag()라는 함수를 정의한다. GA 추적 태그에서 이벤트를 보내는데 사용된다. 이 함수는 인자로 전달된 이벤트 정보를 dataLayer 변수에 추가한다. 나는 dataLayer에 데이터가 삽입될 때 GA에 데이터를 전송하는 이벤트 리스너가 있지 않을까 생각했다.
마지막 두 행에서는 GA 추적 코드의 js, config 기능을 이용해 현재 추적 정보와 설정 정보(GA_MEASUREMENT_ID)를 전송하고 있다.