adjust-icon

Adjust 웹 SDK와 Google 태그 매니저 연동

본 가이드는 Adjust 웹 SDK를 Google 태그 매니저(GTM)와 함께 사용하는 방법을 설명하며, 여기에는 이벤트의 로딩, 초기화, 트래킹에 대한 설정이 포함됩니다.

웹 SDK 로드 및 초기화

다음 단계는 Adjust 웹 SDK를 로드하고 초기화하는 단일 GTM 태그를 생성합니다.

1. 커스텀 HTML 태그 생성

태그에 설명이 포함된 이름을 지정합니다(예: Adjust Web SDK - Load and Initialize).

2. SDK 로더 스니펫 추가

GTM 커스텀 HTML 태그 내에서 다음 로더 스니펫 중 하나를 추가합니다.

자동 SDK 업데이트 접근법

이 접근법은 adjust-latest.min.js를 사용하여 항상 가장 최신의 Adjust 웹 SDK 버전을 가져옵니다.

액션: 다음 SDK 로딩 스니펫을 복사하여 GTM 커스텀 HTML 태그에 붙여넣기 합니다.

<script type="application/javascript">
!function(t,r,e,a,n,o,i,l,c,s,d,h,u){var f=i+"_q",m=i+"_c";t[i]=t[i]||{},t[f]=t[f]||[],t[m]=t[m]||[];var p=function(a,n,r){a[r]=function(){n.push([r,arguments])}};for(var g=0;g<l.length;g++)p(t[i],t[f],l[g]);for(var v=0;v<c.length;v++){var y,E=c[v][0],_=[].slice.call(c[v][1]);t[i][E]=function(){var e=arguments;return y=this,t[m].push(function(){y[s]=new(Function.prototype.bind.apply(t[i][E],[null].concat(Array.prototype.slice.call(e))))}),y};for(var g=0;g<_.length;g++){(function(e){t[i][E].prototype[e]=function(){var n=arguments;t[m].push(function(){y[s][e].apply(y[s],n)})}})(_[g])}}h=r.createElement(e),u=r.getElementsByTagName(e)[0],h.async=!0,h.src="https://cdn.adjust.com/adjust-latest.min.js",h.onload=function(){for(var r=0;r<t[m].length;r++)t[m][r]();t[m]=[];for(r=0;r<t[f].length;r++)t[f][r][1][0]&&t[f][r][1][0][s]?t[i][t[f][r][0]](t[f][r][1][0][s]):t[i][t[f][r][0]].apply(t[i],t[f][r][1]);t[f]=[]},u.parentNode.insertBefore(h,u)}(window,document,"script",0,0,0,"Adjust",["initSdk","getAttribution","getWebUUID","waitForAttribution","waitForWebUUID","setReferrer","trackEvent","addGlobalCallbackParameters","addGlobalPartnerParameters","removeGlobalCallbackParameter","removeGlobalPartnerParameter","clearGlobalCallbackParameters","clearGlobalPartnerParameters","switchToOfflineMode","switchBackToOnlineMode","stop","restart","gdprForgetMe","disableThirdPartySharing","trackThirdPartySharing","initSmartBanner","showSmartBanner","hideSmartBanner"],[["ThirdPartySharing",["addGranularOption","addPartnerSharingSetting"]]],"__realObj");
</script>

하위 리소스 무결성(SRI)을 포함한 특정 SDK 버전 접근법

이 접근법은 특정 SDK 버전을 로드하고 하위 리소스 무결성(SRI)을 사용합니다. 이는 버전별 src URL을 integrity 해시 및 crossOrigin 어트리뷰션과 함께 사용합니다. 이러한 요소를 통해 브라우저는 스크립트가 변경되지 않았는지 확인할 수 있습니다. 이 메서드는 새 SDK 버전을 받기 위한 수동 업데이트가 필요합니다.

액션: 다음 SDK 로딩 스니펫을 복사하여 GTM 커스텀 HTML 태그에 붙여넣기 합니다.

<script type="application/javascript">
!function(t,r,e,a,n,o,i,l,c,s,d,h,u){var f=i+"_q",m=i+"_c";t[i]=t[i]||{},t[f]=t[f]||[],t[m]=t[m]||[];var p=function(a,n,r){a[r]=function(){n.push([r,arguments])}};for(var g=0;g<l.length;g++)p(t[i],t[f],l[g]);for(var v=0;v<c.length;v++){var y,E=c[v][0],_=[].slice.call(c[v][1]);t[i][E]=function(){var e=arguments;return y=this,t[m].push(function(){y[s]=new(Function.prototype.bind.apply(t[i][E],[null].concat(Array.prototype.slice.call(e))))}),y};for(var g=0;g<_.length;g++){(function(e){t[i][E].prototype[e]=function(){var n=arguments;t[m].push(function(){y[s][e].apply(y[s],n)})}})(_[g])}}h=r.createElement(e),u=r.getElementsByTagName(e)[0],h.async=!0,h.src="https://cdn.adjust.com/adjust-5.7.2.min.js",o&&(h.crossOrigin="anonymous",h.integrity=o),h.onload=function(){for(var r=0;r<t[m].length;r++)t[m][r]();t[m]=[];for(r=0;r<t[f].length;r++)t[f][r][1][0]&&t[f][r][1][0][s]?t[i][t[f][r][0]](t[f][r][1][0][s]):t[i][t[f][r][0]].apply(t[i],t[f][r][1]);t[f]=[]},u.parentNode.insertBefore(h,u)}(window,document,"script",0,0,"sha384-3BJePftWPBpqzii4G4Z1wjO/OaXCIpqAZ/4hbIB8KGBvrmSwZQLUflAaqRa2poWO","Adjust",["initSdk","getAttribution","getWebUUID","waitForAttribution","waitForWebUUID","setReferrer","trackEvent","addGlobalCallbackParameters","addGlobalPartnerParameters","removeGlobalCallbackParameter","removeGlobalPartnerParameter","clearGlobalCallbackParameters","clearGlobalPartnerParameters","switchToOfflineMode","switchBackToOnlineMode","stop","restart","gdprForgetMe","disableThirdPartySharing","trackThirdPartySharing","initSmartBanner","showSmartBanner","hideSmartBanner"],[["ThirdPartySharing",["addGranularOption","addPartnerSharingSetting"]]],"__realObj");
</script>

향후 SDK 버전 업데이트 방법:

  1. 새 SDK 버전 번호(예: adjust-5.7.2.min.js)로 src 어트리뷰션을 업데이트합니다.
  2. integrity 해시를 업데이트합니다. Adjust 웹 SDK Github 릴리스에 상응하는 INTEGRITY 해시 파일에 이 값이 포함됩니다.

3. SDK 초기화 코드 추가

로더 스니펫 바로 다음에 같은 GTM 커스텀 HTML 태그 내에서 다음 초기화 코드를 추가합니다.

<script>
// --- Initialize the Adjust SDK ---
Adjust.initSdk({
appToken: "YOUR_APP_TOKEN", // Required: Replace with your Adjust App Token
environment: "sandbox", // "sandbox" for testing, "production" for live
});
</script>

전체 커스텀 HTML 태그에는 선택된 SDK 로더 스니펫과 이 초기화 스니펫이 포함됩니다.

4. 태그 실행 옵션 및 트리거 환경 설정

  1. GTM 태그 환경 설정에서 고급 설정 을 확장한 뒤 태그 실행 옵션 에서 페이지당 한 번 을 선택합니다.
  2. 트리거링 섹션을 클릭하고 모든 페이지(페이지 뷰) 트리거를 선택합니다.
  3. 태그를 저장 합니다.

태그는 아래와 같아야 합니다.

GTM에서 Adjust 웹 SDK 로드 및 초기화를 위한 커스텀 HTML

이제 GTM 태그는 선택한 접근 방식과 트리거에 따라 Adjust 웹 SDK를 로드하고 초기화합니다.

trackEvent

1. 새 커스텀 HTML 태그 생성

  1. GTM 컨테이너에서 태그 로 이동한 뒤 새로 만들기 를 클릭합니다.
  2. 자세한 내용을 알 수 있도록 태그 이름을 지정합니다(예: ‘Adjust 이벤트 - 사용자 등록’).
  3. 태그 설정 을 클릭하고 커스텀 HTML 을 선택합니다.

2. 이벤트 트래킹 스니펫 추가

다음 스니펫을 HTML 필드에 추가합니다.

<script>
Adjust.trackEvent({
// Required: Replace "EVENT_TOKEN" with your specific Adjust event token.
eventToken: "EVENT_TOKEN",
// Optional for revenue/currency: uncomment lines below.
// revenue: {{DLV - Transaction Revenue}},
// currency: {{DLV - Transaction Currency}}
});
</script>

3. 트리거 환경 설정

특정 사용자 행동에 따라 이 이벤트 태그를 실행하도록 트리거를 설정합니다. 다음은 두 가지 일반적인 예시입니다.

예시: 양식 제출 추적(예: 사용자 등록)

  1. 새 트리거를 생성하고 이름을 지정합니다(예: ‘제출된 등록 양식’).
  2. 트리거 유형으로 양식 제출 을 선택합니다.
  3. 이 트리거 실행 조건 에서 일부 양식 을 선택합니다.
  4. 양식을 식별하기 위한 조건을 정의합니다(예: Form ID equals registration-form).
  5. 트리거를 저장 합니다.

예시: 데이터 영역에 의해 발생하는 이벤트 추적(예: 매출이 포함된 구매)

이 메서드는 웹사이트가 데이터 영역에 정보를 푸시하여 알리는 구매와 같은 이벤트에 사용됩니다.

  1. 새 트리거를 생성하고 이름을 지정합니다(예: ‘구매 완료’).
  2. 트리거 유형으로 커스텀 이벤트 를 선택합니다.
  3. 이벤트 이름 필드에 개발팀이 제공한 정확한 이름을 입력합니다(예: purchase_completed).
  4. 이 트리거 실행 조건 에서 모든 커스텀 이벤트 를 선택합니다.
  5. 트리거를 저장 합니다.

다음은 사용자 등록 이벤트 예시에 대한 트리거 환경 설정입니다.

GTM에서 Adjust 웹 SDK 로드 및 초기화를 위한 커스텀 HTML

4. 태그 시퀀싱 설정

  1. 이벤트 태그의 고급 설정 에서 태그 시퀀싱 을 찾습니다.
  2. [Your Event Tag Name]이(가) 실행되기 전에 태그 실행 을 활성화합니다.
  3. 태그 설정 에서 ‘Adjust 웹 SDK - 로드 및 초기화’ 태그를 선택합니다. 이를 통해 이벤트를 추적하기 전에 SDK를 로드할 수 있습니다.
  4. 이벤트 태그를 저장 합니다.

다음은 사용자 등록 이벤트 예시의 태그 환경 설정입니다.

GTM에서 Adjust 웹 SDK 이벤트를 실행하는 커스텀 HTML

동적 데이터에 대한 GTM 변수 설정

이벤트가 매출과 같은 동적 데이터를 포함하는 경우 GTM 변수를 사용하여 웹사이트의 데이터 영역에서 값을 읽을 수 있습니다. 이는 데이터 영역이 해당 데이터를 제공하도록 설정된 것으로 가정합니다. 개발자 가이드는 Google의 문서를 참조하시기 바랍니다.

GTM에서 데이터 영역 변수를 생성하는 방법:

  1. 변수 로 이동하여 사용자 정의 변수 아래의 새로 만들기 를 클릭합니다.
  2. 변수의 이름을 지정합니다(예: DLV - Transaction Revenue). 이는 태그 스니펫에 사용된 이름입니다(예: {{DLV - Transaction Revenue}}).
  3. 변수 유형 으로 데이터 영역 변수 를 선택합니다.
  4. 데이터 영역 변수 이름 필드에 데이터 영역에서 사용한 정확한 키 이름을 입력합니다(예: transaction_total).
  5. 데이터 영역 버전버전 2 로 설정합니다.
  6. (선택 사항) 변수가 없는 경우 기본값 을 설정합니다.
  7. 변수를 저장 합니다.

각 동적 데이터에 대해 이 단계를 반복합니다. 생성이 완료되면 Adjust 이벤트 태그에서 사용할 수 있습니다.

예시의 변수 설정은 다음과 같습니다.

GTM의 데이터 영역 변수에 대한 변수 설정