본 가이드는 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 버전 업데이트 방법:
- 새 SDK 버전 번호(예:
adjust-5.7.2.min.js
)로src
어트리뷰션을 업데이트합니다. 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. 태그 실행 옵션 및 트리거 환경 설정
- GTM 태그 환경 설정에서 고급 설정 을 확장한 뒤 태그 실행 옵션 에서 페이지당 한 번 을 선택합니다.
- 트리거링 섹션을 클릭하고 모든 페이지(페이지 뷰) 트리거를 선택합니다.
- 태그를 저장 합니다.
태그는 아래와 같아야 합니다.
이제 GTM 태그는 선택한 접근 방식과 트리거에 따라 Adjust 웹 SDK를 로드하고 초기화합니다.
trackEvent
1. 새 커스텀 HTML 태그 생성
- GTM 컨테이너에서 태그 로 이동한 뒤 새로 만들기 를 클릭합니다.
- 자세한 내용을 알 수 있도록 태그 이름을 지정합니다(예: ‘Adjust 이벤트 - 사용자 등록’).
- 태그 설정 을 클릭하고 커스텀 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. 트리거 환경 설정
특정 사용자 행동에 따라 이 이벤트 태그를 실행하도록 트리거를 설정합니다. 다음은 두 가지 일반적인 예시입니다.
예시: 양식 제출 추적(예: 사용자 등록)
- 새 트리거를 생성하고 이름을 지정합니다(예: ‘제출된 등록 양식’).
- 트리거 유형으로 양식 제출 을 선택합니다.
- 이 트리거 실행 조건 에서 일부 양식 을 선택합니다.
- 양식을 식별하기 위한 조건을 정의합니다(예:
Form ID
equals
registration-form
). - 트리거를 저장 합니다.
예시: 데이터 영역에 의해 발생하는 이벤트 추적(예: 매출이 포함된 구매)
이 메서드는 웹사이트가 데이터 영역에 정보를 푸시하여 알리는 구매와 같은 이벤트에 사용됩니다.
- 새 트리거를 생성하고 이름을 지정합니다(예: ‘구매 완료’).
- 트리거 유형으로 커스텀 이벤트 를 선택합니다.
- 이벤트 이름 필드에 개발팀이 제공한 정확한 이름을 입력합니다(예:
purchase_completed
). - 이 트리거 실행 조건 에서 모든 커스텀 이벤트 를 선택합니다.
- 트리거를 저장 합니다.
다음은 사용자 등록 이벤트 예시에 대한 트리거 환경 설정입니다.
4. 태그 시퀀싱 설정
- 이벤트 태그의 고급 설정 에서 태그 시퀀싱 을 찾습니다.
- [Your Event Tag Name]이(가) 실행되기 전에 태그 실행 을 활성화합니다.
- 태그 설정 에서 ‘Adjust 웹 SDK - 로드 및 초기화’ 태그를 선택합니다. 이를 통해 이벤트를 추적하기 전에 SDK를 로드할 수 있습니다.
- 이벤트 태그를 저장 합니다.
다음은 사용자 등록 이벤트 예시의 태그 환경 설정입니다.
동적 데이터에 대한 GTM 변수 설정
이벤트가 매출과 같은 동적 데이터를 포함하는 경우 GTM 변수를 사용하여 웹사이트의 데이터 영역에서 값을 읽을 수 있습니다. 이는 데이터 영역이 해당 데이터를 제공하도록 설정된 것으로 가정합니다. 개발자 가이드는 Google의 문서를 참조하시기 바랍니다.
GTM에서 데이터 영역 변수를 생성하는 방법:
- 변수 로 이동하여 사용자 정의 변수 아래의 새로 만들기 를 클릭합니다.
- 변수의 이름을 지정합니다(예:
DLV - Transaction Revenue
). 이는 태그 스니펫에 사용된 이름입니다(예:{{DLV - Transaction Revenue}}
). - 변수 유형 으로 데이터 영역 변수 를 선택합니다.
- 데이터 영역 변수 이름 필드에 데이터 영역에서 사용한 정확한 키 이름을 입력합니다(예:
transaction_total
). - 데이터 영역 버전 을 버전 2 로 설정합니다.
- (선택 사항) 변수가 없는 경우 기본값 을 설정합니다.
- 변수를 저장 합니다.
각 동적 데이터에 대해 이 단계를 반복합니다. 생성이 완료되면 Adjust 이벤트 태그에서 사용할 수 있습니다.
예시의 변수 설정은 다음과 같습니다.