> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Tag Manager (GTM) テンプレート

> Web サイトにコードを記述することなく、Google Tag Manager テンプレートを使用して MoEngage Web SDK をデプロイします。

## はじめに

[Google Tag Manager](https://tagmanager.google.com/) は、マーケターが Web サイトのコードを変更することなくマーケティングタグをインストール、保存、管理でき、使いやすい Web ベースのインターフェースから Web サイトやモバイルアプリにタグを即座にデプロイできる無料のツールです。

## MoEngage と Google Tag Manager の統合

MoEngage と Google Tag Manager の統合により、Web サイトにコードを記述することなく、MoEngage Web SDK をデプロイしてそのすべての機能を活用できます。

## Web SDK による統合

<Check>
  テンプレートをインポートし、新しいタグを追加する権限を持つ Google Tag Manager アカウントがあることを確認してください。
</Check>

MoEngage が構築した Google Tag Manager テンプレートには、Initialization Tag と Actions Tag の 2 つがあります。どちらのタグも、Templates セクションからインポートしてワークスペースに追加できます。

### GTM ワークスペースへのテンプレートのインポート

**ステップ 1: 2 つのタグをダウンロードしてインポートする:**

<Frame>
  <img src="https://mintcdn.com/moengage/b13dNrqwcDhjET-m/images/GTM1.png?fit=max&auto=format&n=b13dNrqwcDhjET-m&q=85&s=b7d95922e6b7774c720607939fe70ab1" alt="GTM1" width="2862" height="1642" data-path="images/GTM1.png" />
</Frame>

1. [Initialization Tag](https://raw.githubusercontent.com/moengage/moengage-gtm-initialization/master/template.tpl) と [Actions Tag](https://raw.githubusercontent.com/moengage/moengage-gtm-actions/master/template.tpl) をダウンロードします (右クリックして保存)。
2. GTM ワークスペースにタグをインポートするには、左側のメニューから Templates 画面に移動します。
   <Frame>
     <img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/gtm2.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=9d52544c6232a1695c97ecf91fb403cd" alt="Gtm2" width="2746" height="1220" data-path="images/gtm2.png" />
   </Frame>
3. Tag Templates で、"New" ボタン >> Actions メニュー (右上) >> Import をクリックします。ダウンロードした Initialization Tag のファイルを選択します。
4. 左側に MoEngage のロゴが表示されたら、保存をクリックします。
5. Actions Tag についても同様に行います。

### Initialization Tag

Initialization Tag は、MoEngage Web SDK を Web サイトに追加するために使用します。これにより、MoEngage のネイティブセットアップを最大限に活用できます。

**ステップ 1: Initialization Tag を選択して設定する**

<Frame>
  <img src="https://mintcdn.com/moengage/NIY78GyRePB5ZwUI/images/Initialization-tag.png?fit=max&auto=format&n=NIY78GyRePB5ZwUI&q=85&s=185290be505b6cb6eb1e68f814ff1c82" alt="Gtm3" lightAlt="Gtm3" darkAlt="Gtm3" className="dark:hidden" width="2732" height="1838" data-path="images/Initialization-tag.png" />

  <img src="https://mintcdn.com/moengage/NIY78GyRePB5ZwUI/images/Initialization-tag-1.png?fit=max&auto=format&n=NIY78GyRePB5ZwUI&q=85&s=5dddca637982bdeabf58b8d2c1aa9318" alt="Gtm3" lightAlt="Gtm3" darkAlt="Gtm3" className="hidden dark:block" width="2732" height="1838" data-path="images/Initialization-tag-1.png" />
</Frame>

1. GTM ダッシュボードで、Tags >> New をクリックします。
2. Tag Configuration をクリックし、"Custom" の下で MoEngage の Initialization Tag を探します。
3. 必要に応じてタグを設定します。

| プロパティ | 値 |
| :- | :- |
| Workspace ID | MoEngage アカウントの App ID。**Settings -> General Settings** に移動すると確認できます。 |
| Envirnoment | データのレポート環境を設定します。テスト環境にデータを送信するには `'TEST'` を、本番データには `'LIVE'` を使用します。 |
| Logs Level | ブラウザコンソールでの SDK ログの詳細レベルを制御します: <ul><li>`0`: ログを表示しません (LIVE で推奨)。</li><li>`1`: 重要な SDK ログとエラー (TEST のデフォルト)。</li><li>`2`: すべての情報、デバッグ、エラー、警告のログ。</li></ul> |
| Data center | MoEngage のデータセンターのリージョン (**DC\_X**)。 <ul><li>DC\_1</li><li>DC\_2</li><li>DC\_3</li><li>DC\_4</li></ul> |
| Serviceworker custom path | Service Worker ファイルのパス。プッシュ通知のサポートの設定について詳しくは、[こちら](/docs/ja/developer-guide/web-sdk/web-push/configure-and-integrate-web-push)を参照してください。 |
| Is Onsite-Messaging disabled? | On-site Messaging キャンペーンを使用すると、Web サイト上にパーソナライズされたポップアップや控えめなバナーを表示できます。<br /><br />On-site Messaging の Web SDK 統合は、Web SDK が統合されているすべてのページで自動的に動作を開始します。<br /><br />この Web サイトで On-site Messaging を無効にしたい場合は、このオプションをオンにします。On-site Messaging の設定方法について詳しくは、[こちら](/docs/ja/developer-guide/web-sdk/onsite-messaging/configure-and-integrate-on-site-messaging)を参照してください。 |
| Is SPA enabled? | Web サイトがシングルページアプリケーション (SPA) の場合は、このオプションを選択します。MoEngage が SPA をどのように処理するかについて詳しくは、[こちら](/docs/ja/developer-guide/web-sdk/other-supported-web-sdk-integration/single-page-app-spa-support)を参照してください。 |
| Keep SDK disabled? | 選択すると、初期化時に SDK が無効になります。詳細については、[こちら](/docs/ja/developer-guide/web-sdk/web-sdk-integration/advanced-integration/web-sdk-opt-out)を参照してください。 |
| Enable Web Personalization | Web Personalization は、ユーザーごとに Web サイトの体験をパーソナライズするために使用します。Web Personalization の機能を活用したい場合は、このオプションを選択します。Web Personalization について詳しくは、[こちら](/docs/ja/developer-guide/personalize-sdk/sdk-integration/web-personalization-v2)を参照してください。 |
| Cards Config (in JSON) | カードをパーソナライズしたい場合は、ここに JSON 設定を貼り付けます。ニーズに応じてカードをカスタマイズする方法について詳しくは、[こちら](/docs/ja/developer-guide/web-sdk/cards/cards)を参照してください。 |

**ステップ 2 (オプション): Web プッシュ通知を有効にする**

必要に応じて、Google Tag Manager を介してプッシュを送信できるようにしたい場合は、まず[プッシュ統合](/docs/ja/developer-guide/web-sdk/web-push)のガイドラインに従い、Service Worker ファイルをプロジェクトのルートディレクトリに配置します。

**ステップ 3: トリガーの設定**

タグを設定した後、サイトのすべてのページビューでトリガーされるように設定します。

<Frame>
  <img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/gtm4.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=dbd9aca8ad306fe93dca98bdecc655d0" alt="Gtm4" width="2658" height="1214" data-path="images/gtm4.png" />
</Frame>

これにより、Web サイトのすべてのページで MoEngage Web SDK が初期化されます。

### Actions Tag

MoEngage Actions Tag テンプレートを使用すると、カスタムイベントのトリガー、カスタムおよび標準のユーザー属性の更新、ユーザー ID の追加または更新を行うことができます。

**ステップ 1: Actions Tag を選択して設定する:**

<Frame>
  <img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/gtm6.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=c23b17e38b80f79fef19c8aa3afdb14b" alt="Gtm6" width="2332" height="1280" data-path="images/gtm6.png" />
</Frame>

1. GTM ダッシュボードで、Tags >> New をクリックします。
2. Tag Configuration をクリックし、"Custom" の下で MoEngage Actions Tag を探します。
3. 必要に応じてタグを設定します。

MoEngage Actions Tag を使用すると、MoEngage Web SDK を使用して以下のいずれかのアクションを実行できます。

### カスタムイベントのトラッキング

<Frame>
  <img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/gtm7.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=33d9b2fd266f7bac589eadf2b0b6c71d" alt="Gtm7" width="2264" height="1642" data-path="images/gtm7.png" />
</Frame>

カスタムイベントをトラッキングするには、Tag Type として "Track Custom Event" を選択します。

| **プロパティ** | **値** |
| - | - |
| Tag type | "**Track Custom Event**" を選択します。 |
| Event Name | トラッキングしたいイベントの名前。標準イベントは SDK によって自動的にトラッキングされることに注意してください。 |
| Event Attributes | このイベントとともにトラッキングしたい追加のイベント属性を指定できます。各属性について、"Add Row" をクリックして次を指定します: 1. Attribute Name: カスタム属性の名前 2. Attribute Value: カスタム属性の値。ここでは変数も使用できます。 |

### カスタムユーザー属性のトラッキング

<Frame>
  <img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/gtm8.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=ece3dfa77a3e7d1eadc43f4d9d40dbb7" alt="Gtm8" width="2264" height="1642" data-path="images/gtm8.png" />
</Frame>

カスタムユーザー属性をトラッキングするには、Tag Type として "Track Custom User Attributes" を選択します。

| **プロパティ** | **値** |
| - | - |
| Tag type | "**Track Custom User Attributes**" を選択します。 |
| Attribute Name | トラッキングしたいカスタム属性の名前。 |
| Attribute Value | カスタム属性の値。ここでは変数も使用できます。 |

### ログイン

<Info>
  最新の [Initialization](https://raw.githubusercontent.com/moengage/moengage-gtm-initialization/master/template.tpl) テンプレートと [Actions](https://raw.githubusercontent.com/moengage/moengage-gtm-actions/master/template.tpl) テンプレートをダウンロードして使用してください。ユーザーのログインに "Login" タグタイプを使用している場合は、以下のタグタイプに切り替えてください。
</Info>

ユーザーをログインさせるには、Tag Type として "Identify User (Identity object as param)" を選択します。

<Frame>
  <img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/logingtm.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=97da9b5090e7c5f6a1cf21d62aeffc64" alt="Logingtm" width="2261" height="1423" data-path="images/logingtm.png" />
</Frame>

| **プロパティ** | **値** |
| - | - |
| Tag type | "**Identify User (Identity object as param)**" を選択します。 |
| User Identities | ユーザーの識別に使用したいすべての属性を指定できます。各属性について、"Add Row" をクリックして次を指定します: 1. Attribute Name: ID として設定したい属性の名前。 2. Attribute Value: 属性の値。ここでは変数も使用できます。 |

標準のユーザー属性をトラッキングしたい場合は、"Attribute Name" として以下の名前を使用します。カスタムユーザー属性の名前はそのまま使用できます。

| ユーザー属性名 | "Attribute Name" で使用する名前 |
| - | - |
| ID | uid |
| Email (Standard) | u\_em |
| Gender | u\_gd |
| Birthday | u\_bd |
| Name | u\_n |
| First Name | u\_fn |
| Last Name | u\_ln |
| Mobile Number (Standard) | u\_mb |

たとえば、アカウントで Email (Standard)、Mobile Number (Standard)、ID が User Identities として設定されている場合、以下のようにこれら 3 つの属性でユーザーをログインさせることができます。変数を使用してユーザーの属性値を動的に設定できます。ここでは例として静的な値を指定しています。

<Frame>
  <img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/example.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=cf2af26a83a301d3500999029b11738c" alt="例" width="2270" height="1432" data-path="images/example.png" />
</Frame>

ID のみでユーザーをログインさせたい場合は、代わりに "Identify User (uid as param)" タグタイプを選択できます。

<Frame>
  <img src="https://mintcdn.com/moengage/b13dNrqwcDhjET-m/images/IdentifyUser.png?fit=max&auto=format&n=b13dNrqwcDhjET-m&q=85&s=0155639a4f4f72cca8c9998bf01b65f8" alt="Identify User" width="2270" height="1432" data-path="images/IdentifyUser.png" />
</Frame>

| **プロパティ** | **値** |
| - | - |
| Tag type | "**Identify User (uid as param)**" を選択します。 |
| Value of uid | ユーザーの ID の値。ここでは変数も使用できます。 |

### ログアウト

<Frame>
  <img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/logout.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=6c4d87ce1f2ed6ee00a490c980180932" alt="Logout" width="2264" height="1642" data-path="images/logout.png" />
</Frame>

ユーザーをログアウトさせるには、Tag Type として "Logout" を選択します。

| **プロパティ** | **値** |
| - | - |
| Tag type | "**Logout**" を選択します。 |

### ユーザー ID の更新

<Info>
  最新の [Initialization](https://raw.githubusercontent.com/moengage/moengage-gtm-initialization/master/template.tpl) テンプレートと [Actions](https://raw.githubusercontent.com/moengage/moengage-gtm-actions/master/template.tpl) テンプレートをダウンロードして使用してください。ユーザー ID の更新に "Update User ID" タグタイプを使用している場合は、以下のタグタイプに切り替えてください。
</Info>

Identify User タグタイプを使用して、ユーザーの ID を更新できます。たとえば、現在のユーザーの ID (Email と ID) を更新したい場合は、次のように行うことができます (変数を使用できます)。

<Frame>
  <img src="https://mintcdn.com/moengage/b13dNrqwcDhjET-m/images/UpdateUserIdentities.png?fit=max&auto=format&n=b13dNrqwcDhjET-m&q=85&s=e70885a3464b81d0ef79723441ec03f1" alt="ユーザー ID の更新" width="2270" height="1432" data-path="images/UpdateUserIdentities.png" />
</Frame>

MoEngage でユーザーの User ID の更新がどのように機能するかについて、[詳細はこちら](/docs/ja/developer-guide/web-sdk/data-tracking/web-sdk-user-attributes-tracking)を参照してください。

### 標準属性のトラッキング

<Frame>
  <img src="https://mintcdn.com/moengage/b13dNrqwcDhjET-m/images/TrackStandardAttribute.png?fit=max&auto=format&n=b13dNrqwcDhjET-m&q=85&s=7f6e0c38ee80cb5132b540c3da202d2b" alt="標準属性のトラッキング" width="2264" height="1642" data-path="images/TrackStandardAttribute.png" />
</Frame>

標準属性をトラッキングするには、Tag Type として次のいずれかを選択します。

1. Track First Name
2. Track Last Name
3. Track Email
4. Track Mobile
5. Track Username
6. Track Gender
7. Track Date of Birth

| **プロパティ** | **値** |
| - | - |
| Tag type | "**Track First Name/Last Name/Email/Mobile/Username/Gender/Date of Birth**" を選択します。 |
| Value | 選択した標準属性の値。 |

MoEngage でのユーザーの標準属性の更新について、[詳細はこちら](/docs/ja/developer-guide/web-sdk/data-tracking/web-sdk-user-attributes-tracking)を参照してください。

### SDK の有効化

このタグを使用して SDK を有効にできます。詳細については、[こちら](/docs/ja/developer-guide/web-sdk/web-sdk-integration/advanced-integration/web-sdk-opt-out#enable-sdk-to-start-data-tracking)を参照してください。

<Frame>
  <img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/enablesdk.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=592998f44049430789ced430f5c7ff78" alt="Enablesdk" width="2400" height="1572" data-path="images/enablesdk.png" />
</Frame>

| **プロパティ** | **値** |
| - | - |
| Tag type | Enable SDK |

### SDK の無効化

このタグを使用して SDK を無効にできます。詳細については、[こちら](/docs/ja/developer-guide/web-sdk/web-sdk-integration/advanced-integration/web-sdk-opt-out#how-to-disable-sdk)を参照してください。

<Frame>
  <img src="https://mintcdn.com/moengage/b13dNrqwcDhjET-m/images/DisableSDK.png?fit=max&auto=format&n=b13dNrqwcDhjET-m&q=85&s=f317d037ec349988eff60b0566324413" alt="SDK の無効化" width="2395" height="1573" data-path="images/DisableSDK.png" />
</Frame>

| **プロパティ** | **値** |
| - | - |
| Tag type | Disable SDK |

### データトラッキングの有効化

このタグを使用してデータトラッキングを有効にできます。詳細については、[こちら](/docs/ja/developer-guide/web-sdk/data-tracking/configure-data-opt-out-in-web-sdk#enable-data-tracking)を参照してください。

<Frame>
  <img src="https://mintcdn.com/moengage/b13dNrqwcDhjET-m/images/EnableDataTracking.png?fit=max&auto=format&n=b13dNrqwcDhjET-m&q=85&s=6f430c8bf113ee8b5f7a836cb7fc3968" alt="データトラッキングの有効化" width="2342" height="1330" data-path="images/EnableDataTracking.png" />
</Frame>

| **プロパティ** | **値** |
| - | - |
| Tag type | Enable Data Tracking |

### データトラッキングの無効化

このタグを使用してデータトラッキングを無効にできます。詳細については、[こちら](/docs/ja/developer-guide/web-sdk/data-tracking/configure-data-opt-out-in-web-sdk#disable-data-tracking)を参照してください。

<Frame>
  <img src="https://mintcdn.com/moengage/Q8BtUzruzjcF9i68/images/disable-data-tracking.png?fit=max&auto=format&n=Q8BtUzruzjcF9i68&q=85&s=b76d85422e990f86d44e1f5ca365857f" alt="データトラッキングの無効化" width="2372" height="1378" data-path="images/disable-data-tracking.png" />
</Frame>

| **プロパティ** | **値** |
| - | - |
| Tag type | Disable Data Tracking |

**ステップ 2: トリガーの設定**

タグを設定した後、Web サイトの適切なタイミングでトリガーされるように設定します。これは、カスタムイベントをトラッキングしたいのか、ユーザーをログイン/ログアウトさせたいのかによって異なります。

### タグの順序付け

Actions Tag が実行される前に、Initialization Tag が実行されていることを確認してください。ページの読み込み時や Initialization Tag の直後に実行する必要があるアクションがある場合、SDK が初期化される前に Actions Tag が実行されてしまう可能性があります。

この望ましくない動作を防ぐには、Tag Sequencing を追加し、Initialization Tag の後にのみ Actions Tag が配信されるようにします。

1. **Action Tag** -> **Advanced Settings** -> **Tag Sequencing** -> **Fire a tag before Moengage Actions Tag fires** に移動します。
   <Frame>
     <img src="https://mintcdn.com/moengage/b13dNrqwcDhjET-m/images/Tagssequencing.png?fit=max&auto=format&n=b13dNrqwcDhjET-m&q=85&s=598f5671a2e77550719c2145b11c0fa1" alt="Tagssequencing" width="2424" height="1810" data-path="images/Tagssequencing.png" />
   </Frame>
2. Initialization Tag を選択します。

## GTM サーバーサイドによる統合

Web サイトにコードを記述することなく、GTM サーバーで取得したイベントを MoEngage に転送することもできます。GTM サーバーと MoEngage の統合の設定方法について詳しくは、[ヘルプドキュメント](https://partners.moengage.com/hc/en-us/articles/18795331766676-Google-Tag-Manager-GTM-Server-Side)を参照してください。

## 広告ブロッカーへの対処 (カスタムプロキシドメイン)

広告ブロッカーによって MoEngage SDK のトラフィックが妨げられないようにするため、カスタムプロキシドメインを介してリクエストをルーティングできます。詳細については、[広告ブロッカーへの対処](/docs/ja/developer-guide/web-sdk/web-sdk-integration/advanced-integration/custom-proxy-domain-web)を参照してください。GTM の設定を更新するには、次の手順に従います。

**1. テンプレートの権限を更新する:**

GTM テンプレートのスクリプト挿入権限を更新して、MoEngage SDK がカスタムドメインからスクリプトを読み込めるように承認する必要があります。次の手順に従います。

1. MoEngage の Initialization Tag テンプレートで、**Permissions** タブを選択し、**Inject scripts** セクションを展開します。
2. 許可される URL の一致パターンにカスタムドメインを追加します。`https://cdn.yoursubdomain.yourdomain.com` の形式を使用し、プレースホルダーを実際の customProxyDomain に置き換えます。

<Frame>
  <img src="https://mintcdn.com/moengage/b13dNrqwcDhjET-m/images/UpdateTemplatePermissions.png?fit=max&auto=format&n=b13dNrqwcDhjET-m&q=85&s=56e81bb16e2a31ddf15dd36b9bb79525" alt="テンプレートの権限の更新" width="2879" height="1408" data-path="images/UpdateTemplatePermissions.png" />
</Frame>

**2. Custom Proxy Domain フィールドを設定する:**

すべてのネットワークリクエストがプロキシを使用するように、タグの設定でサブドメインのホスト名を指定します。

* **Custom Proxy Domain** フィールドに、設定済みのサブドメインのホスト名 (例: *yoursubdomain.yourdomain.com*) を入力します。

<Frame>
  <img src="https://mintcdn.com/moengage/b13dNrqwcDhjET-m/images/ConfiguretheCustomProxyDomainField.png?fit=max&auto=format&n=b13dNrqwcDhjET-m&q=85&s=7428d2a798ffa33b06cefba11616ee4c" alt="Custom Proxy Domain フィールドの設定" width="2879" height="1410" data-path="images/ConfiguretheCustomProxyDomainField.png" />
</Frame>