Shopifyを使い始める

Shopify ScriptTagでBraze Web SDKを実装する

ShopifyのScriptTagはリモートJavaScriptコードで、お店のページやチェックアウトの注文状況ページに読み込まれる。ストアページがロードされると、Shopifyはサイトページにスクリプトタグをロードする必要があるかどうかをチェックする。

Brazeをすぐに使い始めたい場合は、BrazeがBraze Web SDK用の定義済みスクリプトをShopifyストアサイトに直接ロードするオプションがある。

Shopifyとの統合の仕組み

Shopifyサイトがロードされると、Shopifyはスクリプトタグをページにロードする必要があるかどうかをチェックする。処理中に、Braze Web SDK スクリプトがストアのページまたはチェックアウトの注文ステータスページに読み込まれます。

また、Shopify ScriptTagやアプリ内メッセージングをチャネルとして必要とする商品閲覧、商品クリック、カート放棄イベントを選択した場合は、事前に定義されたスクリプトを追加する。

有効化する方法

統合の一部としてBraze Web SDKスクリプトを自動的に有効にするには、Shopify統合のセットアップ中に、サポートされているShopify ScriptTagイベントを選択するか、チャネルとしてアプリ内メッセージを有効にする。

Shopifyセットアップコンポーザーから、アスタリスク(*)で示されたイベントは、Web SDKによってサポートされている。これらのイベントを選択するか、ブラウザ内メッセージングを含めると、BrazeはShopify ScriptTag経由でWeb SDKの実装をShopifyストアにセットアップの一部として追加する。

Shopifyのメールキャプチャフォームとユーザー照合

キャプチャフォームにより、顧客のライフサイクルの早期段階で、ダウンストリームのメッセージングとエンゲージメントのために特定可能な顧客情報が取得されます。

Web SDK は device_id を使用して、Shopify のオンサイト行動と匿名ユーザーを追跡します。BrazeのShopify ScriptTagインテグレーションは、ニュースレター登録などのShopifyのメール取り込みフォームからのメールを、ユーザーのdevice_id 。

典型的なメール・キャプチャ・フォームには以下のようなものがある：

• 電子メール・キャプチャ・フォーム
• ニュースレター登録フォーム

ユーザーのメールと device_id を照合するには、次の2つの方法があります。

• Braze自動メールキャプチャスクリプトを使用する
• setEmail またはsetPhoneNumber メソッドを呼び出す

メールや電話での登録のキャプチャ

Brazeを使えば、Eメールや SMS、WhatsAppの登録フォームを使って、Web SDKやアプリ内メッセージを活用できる。

ShopifyのEメールや電話番号のキャプチャ、またはサードパーティのキャプチャフォームを使用する場合は、Braze Web SDKで追跡されるユーザーに直接設定することができる。たとえば、顧客のメールアドレスを取得した場合、そのメールアドレスを顧客のユーザープロファイルに次のように設定できます。

1
braze.getUser().setEmail(<email address>);

これらの値の設定の詳細については、以下のJavascriptリソースを参照のこと：

• ユーザーのメールを設定する
• ユーザーの電話番号を設定する

次のように、ユーザーのメールまたは電話番号を収集するときに、ユーザーのサブスクリプションの状態を設定することもできます。

1
braze.getUser().setEmailNotificationSubscriptionType(braze.User.NotificationSubscriptionTypes.SUBSCRIBED);

これらの値の設定の詳細については、以下のJavascriptリソースを参照のこと：

• ユーザーのメール通知サブスクリプションタイプを設定する
• サブスクリプショングループにユーザーを追加する

サードパーティキャプチャフォームの実装例

1. theme.liquid で、以下のスニペットをhead tag にコピーする：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  const emailInputPoller = setInterval(()=>{
    if (document.getElementById('{FORM_ID}')) {
      document.getElementById('{FORM_ID}').addEventListener("submit",
        function() {  
          var email = document.getElementById('{INPUT_EMAIL_ID}').value
          braze.getUser().setEmail(email)
        }
      );
    }
    clearInterval(emailInputPoller)
  }, 2000)
</script>

2.まず、スクリプトが最初に読み込まれるようにするため、setInterval を呼び出します。 3.{FORM_ID} を、キャプチャするフォームの要素 ID に置き換えます (「ContactFooter」など)。 4.{INPUT_EMAIL_ID} 、フォーム内のEメール入力フィールドの要素IDに置き換える。

1. フォームが送信されると、スクリプトはメール入力値を使用して setEmail を呼び出します。
2. スクリプトが読み込まれたら、スクリプトの読み込みが1回だけであるようにするため、clearInterval を呼び出します。

実装後に予期されること

Braze Web SDKの初期化

Web SDKはセッション開始時に初期化される。Brazeは、Shopifyの顧客ID、Eメール、電話番号などの他の識別子がShopifyストアのゲスト訪問者から容易に入手できない可能性があるため、匿名ユーザーデータを追跡するためにdevice_id を収集する必要がある。

また、チェックアウトプロセス後に顧客からさらに識別可能な情報 (メールアドレスや電話番号など) が提供されるため、ユーザーデータを匿名ユーザープロファイルと照合するために device_id が使用されます。

Braze Web SDKバージョン

Shopify ScriptTag統合によるBraze Web SDKの現在のバージョンはv4.2である。

1 か月あたりのアクティブユーザー数 (MAU)

Web SDKはShopifyの顧客やゲストのセッションを追跡する。その結果、これは Braze ダッシュボードのレポート内で MAU にカウントされ、MAU 割り当ての対象となります。匿名ユーザーも MAU にカウントされることに注意してください。モバイルデバイスの場合、匿名ユーザーはデバイスによって決まります。Web ユーザーの場合、匿名ユーザーはブラウザーのキャッシュによって決まります。