Google Tag Manager

ここでは、Google Tag Manager (GTM) を使用して Web サイトに Braze Web SDK を追加する手順について説明します。Google タグマネージャを使用すると、実稼働コードの解放や開発を必要とせずに、Web サイト上のタグをリモートで追加、削除、および編集できます。

Braze によって構築された2 つのGoogle タグマネージャテンプレート、初期化タグ とアクションタグ があります。

どちらのタグも、Googleのコミュニティ・ギャラリーから、またはコミュニティ・テンプレートから新しいタグを追加する際にBrazeを検索することで、ワークスペースに追加することができる。

更新された Google EU ユーザー同意ポリシー

Google のEU ユーザー同意ポリシーの一部として、次のブール値カスタム属性をユーザープロファイルに記録する必要があります。

• $google_ad_user_data
• $google_ad_personalization

GTM 統合を使用してこれらを設定する場合、カスタム属性でカスタム HTML タグを作成する必要があります。以下は、これらの値を(文字列としてではなく)ブールデータ型としてログに記録する方法の例です。

1
2
3
<script>
window.braze.getUser().setCustomUserAttribute("$google_ad_personalization", true);
</script>

詳細については、オーディエンスを Google に同期するを参照してください。

初期化タグテンプレート

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

ステップ1:プッシュセットアップ(オプション)

オプションで、Google タグマネージャをプッシュ送信できるようにするには、まずpush integration のガイドラインに従い、以下の手順を実行します。

1. サイトのサービスワーカーを設定し、サイトのルートディレクトリに配置します
2. ブラウザ登録を設定する- サービスワーカーが設定されたら、braze.requestPushPermission() メソッドをアプリまたはカスタムHTML タグ(GTM ダッシュボードを使用) でネイティブに設定する必要があります。また、SDK が初期化された後にタグが実行されるようにする必要があります。

ステップ2:初期化タグの選択

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

ステップ3: 設定の構成

Braze API アプリ 識別子キーとSDKエンドポイントを入力します。これは、ダッシュボードの設定の管理 ページにあります。Web SDKの最新のmajor.minor バージョンを入力します。たとえば、最新バージョンが4.1.2 の場合、4.1 と入力します。SDKのバージョン一覧は変更履歴で見ることができる。

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

初期設定](/docs/ja/developer_guide/platform_integration_guides/web/initial_sdk_setup/#step-2-initialize-braze) ガイド)】に記載されている追加初期設定オプションセットから選択する。

ステップ5: 検証とQA

このタグを展開したら、次の2つの方法で適切な統合を確認できます。

1. Googleタグマネージャーのデバッグツールを使って、設定したページやイベントでBraze初期化タグがトリガーされたことを確認する。
2. Braze に対して行われたネットワークリクエストが表示され、グローバル window.braze ライブラリが Web ページで定義されます。

アクションタグテンプレート

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

ユーザー外部 ID の変更

Change Userタグ型は、changeUsermethodを呼び出します。

このタグは、ユーザーがログインするとき、または一意の external_id 識別子で識別されるときに使用します。

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

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

カスタムイベントタグ型は、logCustomEventメソッドを呼び出します。

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

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

イベントプロパティを追加するには、Add Row ボタンを使用します。

e コマースイベント

もし、あなたのサイトがGoogle Tag Managerの標準eコマースイベントデータレイヤーアイテムを使用して購入ログを記録するなら、Eコマース購入タグタイプを使用することができる。このアクションタイプでは、items のリストで送信されたアイテムごとに個別の「購入」を Braze に記録します。

購入プロパティリストでキーを指定することで、購入プロパティとして含める追加のプロパティの名前を指定することもできます。Brazeは、一覧に追加した購入プロパティーのログに記録されている個々のitem 内を検索します。

たとえば、e コマースのペイロードには次の items が含まれているとします。

1
2
3
4
5
6
7
items: [{
  item_name: "5 L WIV ECO SAE 5W/30",
  item_id: "10801463",
  price: 24.65,
  item_brand: "EUROLUB",
  quantity: 1
}]

item_brand と item_name だけを購入プロパティとして渡す場合は、これら2つのフィールドを購入プロパティテーブルに追加するだけです。プロパティを提供しない場合、Brazeのコールで購入プロパティは送信されない。 logPurchaseを呼び出す。

購入の追跡

Purchaseタグ型は、logPurchasemethodを呼び出します。

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

商品IDと価格フィールドsが必要です。

購入プロパティを追加するには、Add Row ボタンを使用します。

トラッキングの停止と再開

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

Web トラッキングを無効または再度有効にするには、それぞれトラッキング無効タグタイプまたはトラッキング再開タグタイプを使用します。これら2 つのオプションは、disableSDK およびenableSDK を呼び出します。

カスタムユーザー 属性

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

1
2
3
4
5
<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>

標準ユーザー属性

ユーザーの名などの標準ユーザー属性は、カスタムユーザー属性と同じ方法でログに記録する必要があります。標準属性項目に渡す値が、Userクラスのドキュメントで指定されている期待されるフォーマットと一致していることを確認する。

たとえば、性別属性は、値として次のいずれかを使用できます。"m" | "f" | "o" | "u" | "n" | "p"したがって、ユーザーの性別を女性に設定するには、次の内容のカスタムHTML タグを作成します。

1
2
3
<script>
window.braze.getUser().setGender("f")
</script>

コンテンツカードの統合

Google Tag Manager を使用してコンテンツカードメッセージングチャネルを統合するには、いくつかの追加ステップがあります。Google Tag Manager は、 Braze CDN (当社Web SDKのバージョン) をWeb サイト コードに直接注入することで機能します。これは、コンテンツカードを実装する場合を除き、Google Tag Manager なしでSDKを統合した場合と同様に、すべてのSDK方法を利用できることを意味します。

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

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

1
2
3
<script>
   window.braze.showContentCards();
</script>

オプション 2: Web サイトに直接統合する

コンテンツカードとそのフィードの外観をより自由にカスタマイズするために、コンテンツカードをネイティブ Web サイトに直接統合できます。これには、標準フィード UI を使用する方法と、カスタムフィード UI を作成する方法の2つの方法があります。

基準フィード

スタンダードフィード UIを実装する場合、Brazeメソッドはメソッドの先頭にwindow.を追加する必要があります。たとえば、braze.showContentCards の代わりに window.braze.showContentCards にする必要があります。

カスタムフィードユーザーインターフェイス

カスタムフィードスタイルの場合、ステップsは、GTMなしでSDKを統合した場合と同じです。たとえば、コンテンツカードフィードの幅をカスタマイズする場合は、以下をCSSに貼り付けることができます。

1
2
3
body .ab-feed { 
    width: 800px;
}

テンプレートのアップグレードと更新

Braze Web SDK の最新バージョンにアップグレードするには、Google Tag Manager ダッシュボードで次の3つのステップを実行します。

1. タグテンプレートを更新する
   ワークスペース内のTemplates ページに移動します。更新が利用可能であることを示すアイコンが表示されます。
   
   
   
   そのアイコンをクリックし、変更を確認した後、Accept Updateをクリックします。
   
   
   
   
2. バージョン番号を更新する
   タグテンプレートが更新されたら、Braze 初期化タグを編集し、SDK バージョンを最新の major.minor バージョンに更新します。たとえば、最新バージョンが4.1.2 の場合、4.1 と入力します。SDKのバージョン一覧は変更履歴で見ることができる。
   
   
   
   
3. QA および公開
   タグコンテナの更新を公開する前に、Google Tagマネージャーのデバッグツールを使用して、新しいSDKバージョンが動作することを確認する。

トラブルシューティングのステップ

タグデバッグを有効にする

それぞれのBraze タグ テンプレートにはオプションのGTM タグ デバッグ チェックボックスがあり、ウェブページのJavaScript コンソールへのデバッグメッセージのログ記録に使用できます。

デバッグモードに入る

Googleタグマネージャーとの統合をデバッグするもう一つの方法は、Googleのプレビューモード機能を使うことだ。

これにより、Web ページのデータレイヤーから、トリガーされた Braze 各タグに送信されている値を特定できるほか、トリガーされたタグとトリガーされなかったタグについても確認できます。

詳細ログの有効化

Braze テクニカルサポートがテスト中にログにアクセスできるようにするには、Google Tag Manager 統合で詳細ログを有効にします。これらのログは、ブラウザーの開発者ツールの [コンソール] タブに表示されます。

Google Tag Manager 統合で、Braze 初期化タグに移動し、[Web SDK ログを有効にする] を選択します。