Google Tag Manager

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
詳細については、[「Audience Sync to Google」](/docs/ja/partners/canvas_steps/google_audience_sync/)を参照してください。

## 初期化タグテンプレート {#initialization-tag}

初期化タグを使用して、Braze Web SDK を Web サイトに追加します。

### ステップ 1:プッシュ設定（オプション）

オプションとして、Google タグ マネージャーを通じてプッシュを送信できるようにするには、まず [プッシュ統合](/docs/ja/developer_guide/platform_integration_guides/web/push_notifications/integration/) ガイドラインに従って次の操作を行います。
1. サイトのサービスワーカーを設定し、サイトのルートディレクトリに配置します。
2. ブラウザ登録の設定 - サービスワーカーの設定が完了したら、 `braze.requestPushPermission()` メソッドは、アプリ内でネイティブに、またはカスタム HTML タグ (GTM ダッシュボード経由) を通じて使用できます。また、SDK が初期化された後にタグが実行されることを確認する必要があります。

### ステップ 2: 初期化タグを選択する

コミュニティ テンプレート ギャラリーで Braze を検索し、**Braze 初期化タグ**を選択します。

![Braze 初期化タグの構成設定を表示するダイアログ ボックス。含まれる設定は、「タグタイプ」、「API キー」、「API エンドポイント」、「SDK バージョン」、「外部ユーザー ID」、「Safari ウェブプッシュ ID」です。][gtm-initialization-tag]

### ステップ 3: 設定を構成する

ダッシュボードの **「設定の管理」** ページにある Braze API アプリ識別子キーと SDK エンドポイントを入力します。Web SDKの最新版を入力してください `major.minor` バージョン。たとえば、最新バージョンが `4.1.2`、 入力 `4.1`。SDK バージョンのリストは、[changelog][changelog] で確認できます。

### ステップ 4: 初期化オプションを選択

[初期設定][7]ガイドに記載されている追加の初期化オプションのオプションセットから選択します。

### ステップ 5: 検証と品質保証

このタグを展開したら、適切な統合を確認する方法は 2 つあります。

1. Google タグ マネージャーの [デバッグ ツール][gtm-debugging-tool] を使用すると、設定したページまたはイベントで Braze 初期化タグがトリガーされたことを確認できます。
2. Brazeへのネットワークリクエストとグローバル `window.braze` これで、Web ページでライブラリが定義されるはずです。

## アクションタグテンプレート {#actions-tag}

Braze アクション タグ テンプレートを使用すると、カスタム イベントをトリガーしたり、購入を追跡したり、ユーザー ID を変更したり、プライバシー要件に応じて追跡を停止または再開したりできます。

![][gtm-アクションタグ]

### ユーザーの外部IDの変更 {#external-id}

**ユーザー変更** タグタイプは、 [`changeUser` 方法](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#changeuser)。 

ユーザーがログインしたり、独自のタグで識別されるときはいつでもこのタグを使用します。 `external_id` 識別子。

**外部ユーザー ID** フィールドに現在のユーザーの一意の ID を必ず入力してください。この ID は通常、Web サイトから送信されたデータ レイヤー変数を使用して入力されます。

![Braze アクション タグの構成設定を表示するダイアログ ボックス。設定には「タグタイプ」と「外部ユーザーID」が含まれます。][gtm-change-user]

### カスタムイベントをログに記録する {#custom-events}

**カスタムイベント** タグタイプは、 [`logCustomEvent` 方法](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#logcustomevent)。

このタグを使用して、オプションでカスタム イベント プロパティを含め、カスタム イベントを Braze に送信します。

変数を使用するか、 **イベント名を入力してイベント名** を入力します。

イベント プロパティを追加するには、**[行の追加]** ボタンを使用します。

![Braze アクション タグの構成設定を表示するダイアログ ボックス。含まれる設定は、「タグタイプ」（カスタム イベント）、「イベント名」（ボタン クリック）、「イベント プロパティ」です。][gtm-custom-event]

### 電子商取引イベント {#ecommerce}

サイトで標準の [eコマース イベント][eコマース] データレイヤー アイテムを使用して購入を Google タグ マネージャーに記録する場合は、**e コマース購入** タグタイプを使用できます。このアクションタイプは、リスト内の各アイテムごとにBrazeで個別の「購入」を記録します。 `items`。

購入プロパティ リストでキーを指定することにより、購入プロパティとして含める追加のプロパティ名を指定することもできます。Brazeは個人の内部を見ることに注意してください `item` リストに追加した購入物件について記録されます。

例えば、eコマースのペイロードに次のような内容が含まれているとします。 `items`:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
もしあなたが望むなら `item_brand` そして `item_name` 購入物件として渡される場合は、その 2 つのフィールドを購入物件テーブルに追加するだけです。プロパティを指定しないと、[\`logPurchase\`][log-purchase] 呼び出しで Braze への購入プロパティは送信されません。

### 購入を追跡する {#purchases}

**購入** タグタイプは、 [`logPurchase` 方法](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#logpurchase)。

このタグを使用して、Braze への購入を追跡します (オプションで購入プロパティも含む)。

**製品 ID** と **価格の** フィールドは必須です。

購入プロパティを追加するには、**[行の追加]** ボタンを使用します。

![Braze アクション タグの構成設定を表示するダイアログ ボックス。含まれる設定は、「タグタイプ」、「外部 ID」、「価格」、「通貨コード」、「数量」、「購入プロパティ」です。][gtm-purchase]

### 追跡を停止して再開する {#stop-tracking}

場合によっては、たとえばユーザーがプライバシー上の理由で Web トラッキングをオプトアウトした後など、Web サイトで Braze トラッキングを無効にしたり再度有効にしたりすることが必要になることがあります。

Web トラッキング **を無効にするか再度有効にするには、それぞれ「トラッキング** を無効にする」または **「トラッキングを再開する」** タグ タイプを使用します。これら2つのオプションは [`disableSDK`](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#disablesdk) そして [`enableSDK`](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#enablesdk)。

### カスタムユーザー属性 {#custom-attributes}

Google タグ マネージャーのスクリプト言語の制限により、カスタム ユーザー属性は使用できません。カスタム属性をログに記録するには、次の内容のカスタム HTML タグを作成します。

\`\`\`html
<script>
  // Note: If using SDK version 3.x or below, use `window.appboy` instead of `window.braze`
  // Version 4 or greater should use `window.braze`
window.braze.getUser().setCustomUserAttribute("attribute name", "attribute value");
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
## コンテンツカードの統合

Google タグ マネージャーを使用して [コンテンツ カード](/docs/ja/user_guide/message_building_by_channel/content_cards/about/) メッセージング チャネルを統合するには、いくつかの追加手順が必要です。Google タグ マネージャーは、[Braze CDN](/docs/ja/developer_guide/platform_integration_guides/web/initial_sdk_setup#install-cdn)(Web SDK のバージョン) をウェブサイトのコードに直接挿入することで機能します。つまり、コンテンツ カードを実装する場合を除き、Google タグ マネージャーを使用せずに SDK を統合した場合と同じように、すべての SDK メソッドを利用できます。

### オプション 1: GTMを使用した統合

コンテンツ カード フィードの標準的な統合には、Google タグ マネージャーで **カスタム HTML** タグを使用できます。カスタム HTML タグに次のコードを追加すると、標準のコンテンツ カード フィードがアクティブになります。

\`\`\`html
<script>
   window.braze.showContentCards();
</script>