GoogleタグマネージャーからBrazeのWeb SDKを利用できるようにする

BrazeのWeb　SDKを追加する方法として、NPMやYarnパッケージマネージャーを使う、CDNでホストされているスクリプトを使う方法以外に、 Googleタグマネージャーを利用する方法があります。

Googleタグマネージャーのテンプレートライブラリからインストールできるようになっています。

現状、WebサイトにSDKをインストールするBraze Initialization Tagと、 カスタムイベントのトリガー、購入、ユーザーIDの変更、SDKトラッキングの切り替えに使用できるBraze Actions Tagの2つが用意されていました。

やってみる

Googleタグマネージャーの組み込みが完了しているサイトに対してBrazeのWeb　SDKを組み込んできます。

テンプレートの検索

タグマネージャーにログインし、設定したいコンテナのワークスペースタブを開きます。

テンプレートをクリックし、タグ テンプレートの検索ギャラリーをクリックします。

テンプレートの一覧が表示されるダイアログが表示されますので、検索ボックスにbrazeと入力します。

すると上記の画像のように

• Braze Initialization Tag
• Braze Actions Tag

が表示されるようになります。

Braze Initialization Tagをインストール

検索結果に出てきたBraze Initialization Tagをクリックします。

タグの内容に関しての説明が表示されます。

ワークスペースに追加ボタンをクリックします。・

確認ダイアログが起動するので、内容を確認後、追加をクリックします。

追加が完了するとタグ テンプレートの一覧に表示されるようになります。

Braze Initialization Tagの設定

タグの画面から新規タグを作成します

上記のような画面が立ち上がるので、タグの設定の鉛筆アイコンをクリックします。

タグタイプの選択では、brazeと検索すると組み込んだテンプレートが表示されます。これをクリックします。

初期化に必要な情報である

• API Key
• API Endpoint

を入力します。

残りの設定は必要に応じて初期設定ガイドの説明に従って変更します。

設定後、任意のタグの名前を入力し、保存をクリックします。

すると、トリガーを設定するように促されますので、Initialization - All Pagesを選択します・

公開とデバッグ

設定後、タグマネージャーのコンソールで公開をクリックします。

正しく組み込まれたかを確認するためにタグマネージャーのプレビューを利用することも可能です。

※ やり方に関しては割愛

Braze Actions Tagをインストール

カスタムイベントをトリガーしたり、購入を追跡したり、ユーザーIDを変更したりできるように、Braze Actions Tagのインストールも行います。

インストールはInitialization Tagの時と同じ方法で大丈夫です。

Actions Tagのタイプは以下のようになっています。

Braze Actions Tagの設定

Change User

ユーザー外部IDを設定するため、Change Userのタグタイプを設定してみます。

Tag TypeをChange Userにし、 External User ID にユーザーの一意のIDを入力します。

通常、External User IDはWebサイトから送信されるデータレイヤー変数を使用して入力されます。

※)データレイヤー変数変数を使用した例

user_subという変数をExternal User IDに設定した時の画面です。

Custom Event

Custom Eventタイプを設定すると、カスタムイベントをBrazeに送信できます。

Tag TypeをCustom Eventにし、 Event Name にイベント名を入力します。カスタム変数を使用することもできます。

Event Propertiesでは、カスタムイベントのプロパティを設定できます。 これもカスタム変数を使用することができます。

カスタムイベントのプロパティについて

さまざまなトリガーを利用してカスタムイベントを送信できます、。

以下は、クリックをトリガーにした時の例。

※) add-watchlistというIDがついた要素をクリックするとカスタムイベントをBrazeに送信

このイベントをタグマネージャーのデバッグモードで確認したところ、以下のようにデータが参照できました

Firing Triggersの全てにチェックがついているので、正常にトリガーが発砲していることがわかります。

Brazeのダッシュボードでカスタムイベントを確認したところ、こちらにもデータが送信されていました。

このデータを使ってキャンペーンやカンバスの作成ができるようになりますね。

Purchase

Purchaseのタグタイプを利用すると、Brazeに購入イベントが送信できます。

購入イベントについて

Product IDとPriceは必須となっています。カスタム変数を使用することもできます。

購入イベントに使用するトリガーを設定し、デバッグモードで確認しましょう。

送信できた時のデバッグイベント)

トリガーが発砲されてイベントが送信されたことを確認できました。

Brazeのダッシュボードでも送信されたデータが確認できるようになります。

Disable/Resume

WebサイトでBrazeのトラッキングを無効または再度有効にする必要がある場合は、

Disable Tracking / Resume Tracking のタグタイプを指定することで可能となります。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

GoogleタグマネージャーとBraze SDKの統合に関して調べてみました。

一度統合ができると、アプリのコードの本番投入をせずともBrazeにデータを送信できるようになるので、Googleタグマネージャーを利用中の方は検討してみてください。 ただし、カスタムユーザー属性に関してはタグマネージャー経由で送信できないようですので、アプリ内でjavascriptのコードを追加して送信しなければいけません。

参考

Googleタグマネージャーとの統合