WebサイトにBrazeのSDKを組み込んでIn-App Messages(アプリ内メッセージ)を出してみる

マーテック(MarTech)

#Braze

森亮介

2022.01.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Brazeはカスタマーエンゲージメントに特化したプラットフォーム（CUSTOMER ENGAGEMENT PLATFORM）で、ユーザーの行動データ(サイトやアプリ内でのアクション)やその他のデータ（購買情報、位置情報、天気予報など様々）から分析し、パーソナライズした情報を提供することができるようになります

ユーザーのデータを集めるには、アプリやサイトにBraze SDKを組み込む必要があります。

Braze Web SDKを使用すると、ウェブユーザーに対して、分析結果を収集し、リッチなIn-App Messages、Push、Content Cardメッセージを表示することができます。

今回はローカル環境で構築したWebサイトでIn-App Messagesを通知してみようと思います。

Brazeにアプリを追加

BrazeのSDKを組み込むアプリを事前に作成しておきます。

Brazeのダッシュボードにログインし、設定の管理->設定　から　アプリを追加　をクリックしてWebのアプリを追加しておきます。

SDKのsetup

Webに組み込む方法として、NPM か Yarnのpackage managersを使ってインストールする、Google Tag Manager Template Libraryからインストールする、CDNでホストされているスクリプトをHTMLから直接参照する　の3つがあります。

Step 1: Install the Braze library

サンプルとして使用するサイトがSPAなので、今回はpackage managerを使っってインストールしてみます。

npm install --save @braze/web-sdk

SDKの初期化

インストールしたSDKを読み込むには、標準的なNode.jsモジュールを読み込む時と同じようにインポートすることで可能です。

const appboy = require('@braze/web-sdk');
// or if you prefer using import:
// import appboy from '@braze/web-sdk';

appboy.initialize('YOUR-API-KEY-HERE', { baseUrl: 'YOUR-SDK-ENDPOINT' });
appboy.display.automaticallyShowNewInAppMessages();

// optionally set the current user's External ID
if (isLoggedIn){
    appboy.changeUser(userIdentifier);
}

appboy.openSession();

API KEYとSDKのENDPOINTですが、Brazeに追加したアプリの設定画面から参照可能です。

In-App Messagesの作成

Brazeのダッシュボードで、キャンペーン・キャンバスを使用することによりIn-App Messagesの作成が可能です

今回はキャンペーンを作って配信していきます。

ダッシュボードのキャンペーンページからCreate Campain　をクリックし、In-App Messagesを選択するとウィザードが表示されます。

キャンペーンの作成に関しては公式ドキュメントに詳しく記載がありますので、そこを参考にします。

※ 詳しい内容は割愛

ユーザーガイド: Creating an in-app message

作成後

セッションを開始時にアプリのユーザーに対してメッセージを配信する　といった設定にしてみました。

メッセージは以下のような感じに。

配信確認

キャンペーンによるIn-App Messagesを作成したので、実際のWebサイトを使って確認してみます。

なお、ユーザーに関しては事前にBrazeに登録済みです。

ログイン後のページにメッセージを表示させるようにSDKを設置したところ、上記のように表示されるようになりました。

キャンペーンの分析ページを確認してみると、受信者が１人増えていました。

（参考） In-App Messagesの手動配信

In-App Messagesですが、Brazeではいくつかの異なるイベントタイプの結果としてアプリ内メッセージの表示をトリガーすることになります。

SDKの初期化の時に

appboy.display.automaticallyShowNewInAppMessages();

を記述していましたが、これはアプリ内に自動的に表示させるようにするためのものです(デフォルト)

トリガーされて自動で表示させるのではなく、手動でメッセージの配信を行いたい場合はカスタマイズで可能となっています。

automaticallyShowNewInAppMessagesを無効(コードから削除する)にし、subscribeToInAppMessage関数を使います。

例)

appboy.subscribeToInAppMessage(function(inAppMessage) {
  // なんらかの条件の時にメッセージを配信する
  if ( should_show_the_message_according_to_your_custom_logic ) {
      appboy.display.showInAppMessage(inAppMessage);
  } else {
      // do nothing
  }
});