교차 도메인 측정

이 가이드에서는 analytics.js를 사용하여 여러 도메인의 이벤트를 측정하는 방법을 설명합니다.

개요

analytics.js 라이브러리는 고유한 클라이언트 ID를 사용하여 신규 사용자 또는 재사용자인지를 확인합니다. 클라이언트 ID가 일치하는 조회가 동일한 속성으로 이미 전송된 경우 사용자는 재사용자로 간주됩니다.

기본적으로 클라이언트 ID는 브라우저의 쿠키에 저장되므로 동일한 도메인의 페이지에서만 액세스할 수 있습니다. 여러 도메인에서 특정 사용자의 동일한 클라이언트 ID를 추적하려면 교차 도메인 추적을 사용하세요.

여러 도메인 간에 클라이언트 ID를 공유하려면 현재 도메인(소스 도메인)에서 측정 대상 도메인을 가리키는 URL에 쿼리 매개변수로 클라이언트 ID를 추가하면 됩니다. 사용자가 소스 도메인에서 링크를 클릭하거나 양식을 제출하고 대상 도메인으로 이동하면 도착 페이지의 코드가 URL에서 클라이언트 ID를 읽어 액세스할 수 있습니다.

소스 도메인에서 클라이언트 ID 가져오기

소스 도메인에서 클라이언트 ID를 검색하려면 get 메서드를 사용합니다.

ga(function(tracker) {
  var clientId = tracker.get('clientId');
});

소스 도메인에 클라이언트 ID가 있으면 대상 도메인을 가리키는 링크에 해당 ID를 추가할 수 있습니다.

<a href="https://destination.com/?clientId=XXXXXX">destination.com</a>

대상 도메인에서 클라이언트 ID 설정

create 명령어에서 클라이언트 ID 필드를 지정하여 사용할 클라이언트 ID를 대상 도메인의 추적기 객체에 알릴 수 있습니다.

ga('create', 'UA-XXXXX-Y', 'auto', {
  'clientId': getClientIdFromUrl()
});

대상 도메인에 클라이언트 ID가 이미 있는 경우 이 방법을 사용하면 기존 클라이언트 ID를 덮어씁니다.

URL 공유 감지

URL에서 클라이언트 ID를 전달할 때 문제가 발생할 수 있는데, 사용자가 URL을 공유하면 다른 사용자가 속한 클라이언트 ID가 포함된 URL을 공유하게 될 수도 있습니다.

이 문제를 피할 수 있는 한 가지 방법은 클라이언트 ID에 타임스탬프를 추가하는 것입니다. 이렇게 하면 URL이 처음 만들어진 시기를 감지하고 시간이 너무 오래 지난 경우 클라이언트 ID를 유효하지 않은 것으로 간주할 수 있습니다. 타임스탬프 외에도 사용자 에이전트 문자열, 기타 브라우저 또는 기기별 메타데이터를 추가할 수 있습니다. 그런 다음 대상 도메인에서 메타데이터가 일치하지 않으면 다른 사용자가 보낸 클라이언트 ID를 알 수 있습니다.

내부 추천 무시

페이지의 문서 리퍼러가 속성의 추천 제외 목록에 있는 항목과 일치하지 않는 호스트 이름에서 제공될 때마다 새 추천 캠페인이 생성됩니다.

기본적으로 추천 제외 목록에는 속성이 처음 생성될 때 제공한 도메인만 포함됩니다. 사용자가 여러 도메인을 탐색할 때 새 추천 캠페인이 생성되지 않도록 하려면 추천 제외 목록에서 측정하려는 각 도메인에 항목을 추가해야 합니다.

iframe

위에서 설명한 기법을 사용하려면 analytics.js가 로드된 후 실행되는 자바스크립트 코드가 필요합니다. 일반적으로 <iframe> 요소는 analytics.js가 로드되기 전에 페이지에 존재하므로 iframe의 소스 매개변수에 있는 URL에 클라이언트 ID를 추가할 수 없는 경우가 많습니다.

이 문제를 해결하려면 상위 페이지에서 클라이언트 ID 데이터를 수신할 때까지 추적 도구 생성을 지연하도록 iframe 내부의 페이지를 구성하면 됩니다. 또한 상위 페이지에서 postMessage를 사용하여 클라이언트 ID를 iframe 페이지로 보내도록 구성합니다.

다음은 source.com의 상위 페이지 코드의 예입니다.

<iframe id="destination-frame" src="https://destination.com"></iframe>

<script>
ga('create', 'UA-XXXXX-Y', 'auto');
ga(function(tracker) {
  // Gets the client ID of the default tracker.
  var clientId = tracker.get('clientId');

  // Gets a reference to the window object of the destionation iframe.
  var frameWindow = document.getElementById('destination-frame').contentWindow;

  // Sends the client ID to the window inside the destination frame.
  frameWindow.postMessage(clientId, 'https://destination.com');
});
</script>

다음은 destination.com에 호스팅된 iframe에서 메시지를 수신하는 코드입니다.

window.addEventListener('message', function(event) {
  // Ignores messages from untrusted domains.
  if (event.origin != 'https://destination.com') return;

  ga('create', 'UA-XXXXX-Y', 'auto', {
    clientId: event.data
  });
});

analytics.js가 상위 페이지에서 로드되지 않아 iframe의 페이지에서 클라이언트 ID를 수신하지 못할 수 있습니다. 이 케이스를 처리하는 방법은 클라이언트 ID의 일치 정도에 따라 다릅니다.

클라이언트 ID가 동일하다는 것을 알고 있을 때만 데이터를 캡처하려면 위의 코드만 있으면 됩니다. 상위 페이지에서 클라이언트 ID를 수신하는지 여부에 관계없이 프레임의 페이지에서 데이터를 캡처하려면 대체를 추가해야 합니다.

다음 코드에서는 iframe 페이지가 시간 초과되어 상위 페이지가 느려지거나 클라이언트 ID를 전송하지 못하는 경우를 처리합니다.

// Stores whether or not the tracker has been created.
var trackerCreated = false;

function createTracker(opt_clientId) {
  if (!trackerCreated) {
    var fields = {};
    if (opt_clientId) {
      fields.clientId = opt_clientId;
    }

    ga('create', 'UA-XXXXX-Y', 'auto', fields);
    trackerCreated = true;
  }
}

window.addEventListener('message', function(event) {
  // Ignores messages from untrusted domains.
  if (event.origin != 'https://destination.com') return;

  // Creates the tracker with the data from the parent page.
  createTracker(event.data);
});

// Waits for three seconds to receive the client ID from the parent page.
// If that doesn't happen, it creates the tracker as normal.
setTimeout(createTracker, 3000);