adjust-icon

Adjust Web SDKとGoogle タグ マネージャーの連携

このガイドでは、読み込み、初期化、イベントの計測など、Google タグマネージャー（GTM）でAdjust Web SDKを使用する方法を説明します。

Web SDKの読み込みと初期化

以下の手順で、Adjust Web SDKを読み込み、初期化する単一のGTMタグを作成します。

1.カスタムHTMLタグを作成

タグにはわかりやすい名前を付けてください。例：Adjust Web SDK - Load and Initialize

2.SDKローダースニペットを追加

GTMのカスタムHTMLタグ内に、次のローダースニペットのいずれかを追加します。

SDKを自動アップデートする場合

常にAdjust Web SDKの最新バージョンを取得するには、adjust-latest.min.jsを使用します。

手順： 以下の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バージョンを読み込み、サブリソース完全性（Subresource Integrity、SRI）を使用します。integrityハッシュと crossOriginアトリビュートを含む、バージョン固有のsrc URLを使用します。これらの要素により、ブラウザーはスクリプトが改ざんされていないことを検証できます。この方法では、新しい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 Web 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のタグ設定で「 詳細設定（Advanced Settings） 」を開き、「 タグ呼び出しオプション（Tag firing options） 」で「 1ページにつき一度（Once per page） 」を選択します。
  2. 「 トリガー（Triggering） 」セクションをクリックし、「 すべてのページ（ページビュー）（All Pages (Page View)） 」のトリガーを選択します。
  3. タグを 保存（Save） します。

タグは以下のようにしてください。

Custom HTML to load and initialize Adjust Web SDK in GTM

これで、選択した方法とトリガーでAdjust Web SDKを読み込み、初期化できるようになります。

trackEvent

1.新しいカスタムHTMLタグを作成

  1. GTMコンテナで、「 タグ（Tags） 」に移動し、「 新規（New） 」をクリックします。
  2. タグに分かりやすい名前を付けてください（例：「Adjust Event - User Registration」）。
  3. 「 タグの設定（Tag Configuration） 」をクリックし、「 カスタムHTML（Custom 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.トリガーを設定

特定のユーザーアクションに基づいて、このイベントタグを呼び出すトリガーを設定します。以下に、一般的な例を2つ示します。

例：フォームの送信を計測（ユーザー登録など）

  1. 新しいトリガーを作成し、名前を付けます（例：「Registration form submitted」）。
  2. トリガータイプとして「 フォーム送信（Form Submission） 」を選択します。
  3. 「 このトリガーの発生場所（This trigger fires on） 」で、「 一部のフォーム（Some Forms） 」を選択します。
  4. フォームを識別する条件を定義します（例：Form ID equals registration-form）。
  5. トリガーを 保存（Save） します。

例：データレイヤーによって計測されるイベント（例：収益を伴う購入）を計測

これは、データレイヤーに情報をプッシュすることでWebサイトから通知される、購入などのイベントに使用されます。

  1. 新しいトリガーを作成し、名前を付けます (例: 「Purchase completed」)。
  2. トリガーのタイプとして「 カスタムイベント（Custom Event） 」を選択します。
  3. 「 イベント名（Event name） 」フィールドに、開発チームから提供された正確な名前を入力します（例：purchase_completed）。
  4. 「 このトリガーの発生場所（This trigger fires on） 」で「 すべてのカスタムイベント（All Custom Events） 」を選択します。
  5. トリガーを 保存（Save） します。

以下は、ユーザー登録イベントのトリガー設定例です。

Custom HTML to load and initialize Adjust Web SDK in GTM

4.タグの順序付けを設定する

  1. イベントタグの「 詳細設定（Advanced Settings） 」で「 タグの順序付け（Tag Sequencing）」 」を見つけます。
  2. 「 [イベントタグ名]が発効する前にタグを配信（Fire a tag before [Your Event Tag Name] fires） 」を有効にします。
  3. 「 設定タグ（Setup Tag） 」には、「Adjust Web SDK - Load and Initialize」タグを選択します。これにより、イベントの計測前にSDKが確実に読み込まれます。
  4. イベントタグを 保存（Save） します。

以下は、ユーザー登録イベントのタグの設定例です。

GTMでのカスタムHTMLによるAdjust Web SDKイベントの発効

動的データのGTM変数を設定

イベントに収益などの動的データが含まれている場合は、GTM変数を使用して、Webサイトのデータレイヤーから値を読み取ることができます。ただし、このようなデータを提供するようにデータレイヤーを事前に構成する必要があります。詳細については、Googleのドキュメントで開発者向けの情報を参照してください。

GTMでデータレイヤー変数を作成するには：

  1. 「 変数（Variables） 」に移動し、「 ユーザー定義変数（User-Defined Variables） 」の下にある「 新規（New） 」をクリックします。
  2. 変数に名前を付けます（例：DLV - Transaction Revenue）。これはタグスニペットで使用される名前です（例：{{DLV - Transaction Revenue}}）。
  3. 「 変数タイプ（Data Layer Variable） 」として「 データレイヤー変数（Variable Type） 」を選択します。
  4. 「 データレイヤー変数名（Data Layer Variable Name） 」フィールドに、データレイヤーで使用されている正確なキー名を入力します（例：transaction_total）。
  5. 「 データレイヤーのバージョン（Data Layer Version） 」は「 バージョン2（Version 2） 」のままにしてください。
  6. （オプション）変数が存在しない場合は、 デフォルト値（Default Value） を設定します。
  7. 変数を 保存（Save） します。

動的データごとにこの手順を繰り返してください。作成後、Adjustのイベントタグでそれらを使用できます。

以下は変数設定の例です。

Variable configuration for a Data Layer Variable in GTM