Shopify標準統合セットアップ

このページでは、Shopifyオンラインストアを使用するユーザー向けの標準統合を使用して、BrazeとShopifyを統合する方法について説明します。Shopifyヘッドレスサイトを使用する場合、またはよりカスタマイズされたソリューションを実装する場合は、Shopifyカスタム統合セットアップを参照してください。

ステップ1: Shopifyストアを接続する

1. Brazeでパートナー連携 > テクノロジーパートナーに移動し、「Shopify」を検索します。
2. ShopifyパートナーページでBegin setupを選択して、連携プロセスを開始します。
   
   
   
   
3. Shopifyアプリストアで、Brazeアプリケーションをインストールします。
   
   

注

Shopifyアカウントが複数のストアに関連付けられている場合は、ヘッダーのストアアイコンを選択し、Switch storesを選択することで、ログインしているストアを変更できます。

4. Brazeアプリをインストールした後、Brazeにリダイレクトされ、Shopifyに接続するワークスペースを確認するよう求められます。Shopifyストアは1つのワークスペースにのみ接続できます。切り替える必要がある場合は、正しいワークスペースを選択してください。
   
   

5. Begin setupを選択します。
   
   

ステップ2：Braze Web SDKを有効にする

Shopifyオンラインストアでは、標準セットアップを選択して、Braze Web SDKとJavaScript SDKを自動的に実装できます。

標準セットアップのオンボーディングパスを選択した後、BrazeがSDKを初期化して読み込むタイミングを以下のオプションから選択する必要があります。

• サイト訪問時（セッション開始時など）
  • 識別済みユーザーと匿名ユーザーの両方をトラッキングします
• アカウント登録時（アカウントログイン時など）
  • 識別済みユーザーのみをトラッキングします
  • サイト訪問者がアカウントに登録またはログインした時点からデータのトラッキングを開始します

注

新規のお客様には、セットアップ時に最新バージョンのBraze Web SDKとJavaScript SDKがプロビジョニングされます。既存のお客様は、連携設定で現在のSDKバージョンを確認でき、新しいバージョンが利用可能になった際に通知を受け取り、連携設定からセルフサービスでアップグレードできます。

ステップ3:Shopifyデータを設定する

標準データ設定

重要

この連携では、BrazeがWebhookを正しいユーザープロファイルに一致させるために、ユーザーエイリアスは以下の形式を使用する必要があります。

• alias_label: shopify_cart_${cartToken}
• alias_name: shopify_cart_token

次に、トラッキングしたいShopifyデータを選択します。

標準連携では、以下のイベントがデフォルトで有効になります。

連携を通じてトラッキングされるデータの詳細については、Shopifyデータ機能を参照してください。

重要

Shopify連携は、Shopifyの顧客作成と顧客更新のWebhookをサポートしています。これらはデータ設定の構成設定にあります。Shopifyでユーザープロファイルが作成または更新されると、対応するBrazeのユーザープロファイルも作成または更新されます。

これらのアクションはBrazeでカスタムイベントをトリガーせず、ShopifyのユーザーデータをBrazeと同期するためだけに使用されます。同期されるデータには、カスタム属性、標準属性項目、および設定内で有効にされている場合は購読グループの状態が含まれます。

過去データのバックフィル設定

Shopifyデータのトラッキングステップで、連携の一部として初期の過去データロードを含めるチェックボックスを選択します。

インポートされる内容、収益レポートの動作、設定のスクリーンショット、およびアクティブなキャンペーンやキャンバスですでにBrazeを使用している場合のガイダンスについては、過去データのバックフィルを参照してください。

(上級) カスタムデータトラッキング設定

Braze SDKを使用すると、この連携の標準イベントを超えたカスタムイベントやカスタム属性をトラッキングできます。カスタムイベントは、ストアでのユニークなインタラクションをキャプチャします。例:

カスタムデータのトラッキングにより、ユーザー行動に関するより深いインサイトが得られ、さらなるパーソナライゼーションをサポートできます。カスタムイベントを実装するには、theme.liquidファイルでストアフロントのテーマコードを編集する必要があります。開発者の協力が必要になる場合があります。

たとえば、次のJavaScriptスニペットは、現在のユーザーがニュースレターを購読しているかどうかを確認し、それをBrazeのプロファイルにカスタムイベントとして記録します:

1
2
3
4
5
6
7
8
9

braze.logCustomEvent(
  “subscribed_to_newsletter”,
  {
    newsletterName: ‘News and Offers’,
    customerEmail: ‘customer_1@example.com’,
    sendOffers: true
  }
);

SDKは、イベントやカスタム属性を記録するために、ユーザーのデバイス上で初期化されている（アクティビティをリッスンしている）必要があります。カスタムデータの記録について詳しくは、UserオブジェクトとlogCustomEventオブジェクトを参照してください。

ステップ4:ユーザーの管理方法を設定する

ドロップダウンからexternal_idタイプを選択します。

重要

メールアドレスまたはハッシュされたメールアドレスをBrazeのexternal IDとして使用すると、データソース間のID管理が簡素化されます。ただし、ユーザーのプライバシーとデータセキュリティに対する潜在的なリスクを考慮することが重要です。

• 推測可能な情報: メールアドレスは推測されやすく、攻撃に対して脆弱です。
• 悪用のリスク: 悪意のあるユーザーがWebブラウザーを改ざんし、他人のメールアドレスをexternal IDとして送信した場合、機密メッセージやアカウント情報にアクセスされる可能性があります。

デフォルトでは、BrazeはShopifyからのメールを自動的に小文字に変換してから、external IDとして使用します。メールまたはハッシュメールをexternal IDとして使用している場合は、メールアドレスも小文字に変換されていることを確認してから、external IDとして割り当てるか、他のデータソースからハッシュしてください。これにより、external IDの不一致を防ぎ、Brazeでの重複ユーザープロファイルの作成を回避できます。

注

次に表示されるステップは、external IDの選択によって異なります。

• カスタムexternal IDタイプを選択した場合: ステップ4.1〜4.3を実行して、カスタムexternal IDの設定を行います。
• Shopify顧客ID、メール、またはハッシュメールを選択した場合: ステップ4.1〜4.3をスキップし、ステップ4.4に直接進みます。

ステップ4.1:braze.external_idメタフィールドを作成する

1. Shopifyの管理パネルで、Settings > Metafields and metaobjectsに移動します。
2. Customers > Add definitionを選択します。
3. Nameにbraze.external_idと入力します。
4. 自動生成されたネームスペースとキー（custom.braze_external_id）を選択して編集し、braze.external_idに変更します。
5. TypeでID Typeを選択します。

メタフィールドが作成されたら、顧客に対して入力します。次のアプローチをお勧めします。

• 顧客作成webhookをリッスンする: customer/createイベントをリッスンするwebhookを設定します。これにより、新しい顧客の作成時にメタフィールドを書き込むことができます。
• 既存の顧客をバックフィルする: Admin APIまたはCustomer APIを使用して、以前に作成した顧客のメタフィールドをバックフィルします。

潜在的な競合

Shopifyのcustomers/create webhookは、braze.external_idメタフィールドがユーザープロファイルに書き込まれる前に発火する場合があります。この場合:

1. メタフィールドが存在しない場合、Brazeは設定されたエンドポイント（ステップ4.2）を呼び出してexternal IDを取得します。
2. その呼び出しも失敗またはタイムアウトした場合、BrazeはShopify顧客IDをexternal IDとして一時的なユーザープロファイルを作成します。
3. メタフィールドが存在する後続のイベント（customers/updateやecommerce.order_placedイベントのorders/createなど）では、Brazeは自動的に不一致を検出し、一時的なプロファイルを正しいexternal IDとマージします。

つまり、一時的な重複プロファイルが発生する可能性がありますが、自動的に修正されます。これらのプロファイルを手動でマージする必要はありません。

ステップ4.2:external IDを取得するエンドポイントを作成する

Brazeが呼び出してexternal IDを取得できる公開エンドポイントを作成する必要があります。これにより、Shopifyがbraze.external_idメタフィールドを直接提供できないシナリオでも、BrazeがIDを取得できます。

エンドポイント仕様

メソッド: GET

Brazeは、次のパラメーターをエンドポイントに送信します。

サンプルエンドポイント

1

GET https://mystore.com/custom_id?shopify_customer_id=1234&email_address=bob@example.com&shopify_storefront=dev-store.myshopify.com

期待される応答

Brazeは、external IDのJSONを返す200ステータスコードを期待します。

1
2
3

{
  "external_id": "my_external_id"
}

検証

shopify_customer_idとemail_address（存在する場合）がShopifyの顧客値と一致することを検証することが重要です。Shopify Admin APIまたはCustomer APIを使用してこれらのパラメーターを検証し、正しいbraze.external_idメタフィールドを取得できます。

障害時の動作とマージ

200以外のステータスコードは失敗と見なされます。

• マージへの影響: エンドポイントが失敗した場合（非200を返すかタイムアウトした場合）、Brazeはexternal IDを取得できません。その結果、ShopifyユーザーとBrazeユーザープロファイルのマージはその時点では行われません。
• リトライロジック: Brazeは標準的な即時ネットワークリトライを試みる場合がありますが、失敗が続く場合、マージは次の該当イベント（例えば、ユーザーが次にプロファイルを更新するかチェックアウトを完了するとき）まで延期されます。
• サポート性: タイムリーなユーザーマージをサポートするために、エンドポイントの高可用性を確保し、オプションのemail_addressフィールドを適切に処理するようにしてください。

ステップ4.3:external IDを入力する

ステップ4を繰り返し、Brazeのexternal IDタイプとしてカスタムexternal IDを選択した後、エンドポイントURLを入力します。

考慮事項

• Brazeがエンドポイントにリクエストを送信した時点でexternal IDが生成されていない場合、changeUser関数の呼び出し時にShopifyの顧客IDがデフォルトで使用されます。このステップは、匿名ユーザープロファイルと識別済みユーザープロファイルを統合するために重要です。その結果、ワークスペース内に異なるタイプのexternal IDが一時的に共存する期間が発生する場合があります。
• braze.external_idメタフィールドでexternal IDが利用可能になると、インテグレーションはこのexternal IDを優先的に割り当てます。
  • Shopifyの顧客IDが以前Brazeのexternal IDとして設定されていた場合、braze.external_idメタフィールドの値に置き換えられます。

ステップ4.4:ShopifyからメールやSMSのオプトインを収集する（オプション）

ShopifyからメールまたはSMSマーケティングのオプトインを収集するオプションもあります。

メールやSMSチャネルを使用している場合、メールやSMSマーケティングのオプトイン状態をBrazeに同期できます。Shopifyからメールマーケティングのオプトインを同期すると、Brazeはその特定のストアに関連付けられているすべてのユーザーのメール購読グループを自動的に作成します。この購読グループに一意の名前を作成する必要があります。

注

Shopifyの概要で述べたように、サードパーティのキャプチャフォームを使用する場合、開発者がBraze SDKコードを統合する必要があります。これにより、フォーム送信からメールアドレスとグローバルメール購読ステータスをキャプチャできるようになります。具体的には、以下のメソッドをtheme.liquidファイルに実装してテストする必要があります。

• setEmail: ユーザープロファイルにメールアドレスを設定します
• setEmailNotificationSubscriptionType: グローバルメール購読ステータスを更新します

ステップ5：商品を同期する（オプション）

Shopify ストアのすべての商品を Braze カタログに同期し、より深いメッセージングパーソナライゼーションを行うことができます。自動更新はほぼリアルタイムで行われるため、カタログには最新の商品詳細が反映されます。詳しくは、Shopify 商品同期をご覧ください。

ステップ6: チャネルを有効化する（オプション）

Shopify 標準連携では、追加の開発なしに、連携設定からアプリ内メッセージやバナーを有効にできます。

• アプリ内メッセージ
• バナー

アプリ内メッセージ

チャネルを有効化ステップで、連携設定の一部としてアプリ内メッセージを選択すると、メールやSMSのキャプチャフォーム、プロモーションポップアップ、アンケートなどのユースケースが有効になります。作成方法については、アプリ内メッセージを参照してください。

注

Brazeはアプリ内メッセージを通じて、メールアドレスや電話番号などの訪問者情報を収集します。この情報はShopifyに送信されます。このデータにより、マーチャントはストアへの訪問者を認識し、よりパーソナライズされたショッピング体験を提供できます。詳細については、Visitor APIを参照してください。

バナー

バナーは、プロモーション、お知らせ、ターゲットを絞ったオファーなど、パーソナライズされたコンテンツをShopifyストアフロントに表示します。

重要

Shopify標準連携向けのバナーは、現在早期アクセス中です。早期アクセスへの参加にご興味がある場合は、Brazeアカウントマネージャーにお問い合わせください。

重要

バナーには、Shopify Online Store 2.0テーマとBraze SDKバージョン6.8.0以降が必要です。設定時に、Brazeはストアの公開テーマがインラインバナー配置をサポートしているかどうかを確認します。ビンテージテーマはインライン配置をサポートしていないため、チャネルを有効化でバナーをオンにしてバナー配置を作成が無効になっています。バナーを使用するには、Shopify管理画面でOnline Store 2.0テーマにアップグレードしてから、連携設定に戻ってバナーを有効にしてください。

設定

チャネルを有効化でバナーをオンにしてバナー配置を作成を選択し、保存します。

Brazeは、ワークスペースごとに1回、接続されたすべてのShopifyストアで共有される以下のバナー配置を自動的に作成します:

• グローバルヘッダー
• ホームボディ
• グローバルフッター
• 商品情報バナー
• 商品ボディ
• コレクションボディ
• カートボディ
• カートサマリー

注

複数のShopifyストアを接続し、それぞれでバナーを有効にした場合、Brazeは同じ8つの配置を同時に作成します。同じ配置IDを、接続されたすべてのストアで同時に使用できます。

デフォルトの配置IDが設定に合わない場合や、追加の配置を使用したい場合は、手動で配置を作成する必要があります。各配置IDは、対応するShopifyアプリブロックで設定されているものと一致する必要があります。公開後に配置IDを変更した場合は、アプリブロックを一致するように更新しないと、バナーのレンダリングが停止します。

バナーを作成する

ドラッグ＆ドロップエディター、HTML、またはテンプレートを使用して、バナーを作成するキャンペーンまたはキャンバスを作成します。

注

Brazeエディターのプレビューには、バナーのコンテンツのみが表示されます。バナーがサイト上のどこに表示されるかを確認するには、Shopifyテーマエディターでプレビューしてください。

ステップ1: Shopifyテーマにバナーを追加する

1. キャンペーンまたはキャンバスを、自分のアカウントのみを含むテストセグメント（例: 自分のexternal_idやdevice_id）やターゲティングに含まれるテストグループなど、少人数のオーディエンスに対して起動します。これにより、買い物客に公開せずにライブサイトでバナーを確認できます。
2. Shopifyテーマエディターで、バナーを表示したいページを開き、メニューでApps > Add Block > Apps > Brazeを選択します。

3. アプリブロックの設定で、バナー配置から選択した配置のplacement_id（例: global_header）を入力します。

4. （オプション）アプリブロックの幅（コンテナの%）を調整し、ピクセル単位で固定の高さを追加します。デフォルトでは、最大高さはバナーのコンテンツに合わせて調整されます。テーマで上限付きスロットが必要な場合（例: 高いバナーがページコンテンツを押し下げるのを防ぐ場合）は、固定の高さを設定してください。

ステップ2: テストと公開

テストユーザーとしてストアにアクセスし、バナーが正しい配置にレンダリングされ、期待どおりに表示されることを確認します。その後、キャンペーンまたはキャンバスのターゲティングを編集して、完全なオーディエンスにリーチします。パフォーマンスを測定するには、バナー分析を参照してください。

重要

バナーは現在、サンキューページ、注文ステータスページ、または顧客アカウントページではサポートされていません。これらの特定の配置に興味がある場合は、Brazeアカウントチームを通じてリクエストしてください。

Content Cardsとフィーチャーフラグ

Content Cardsやフィーチャーフラグを追加するには、開発者と協力して、必要なSDKコードをtheme.liquidファイルに直接挿入します。詳細な手順については、Braze SDKの統合を参照してください。

Webプッシュ通知

Webプッシュは現在、Shopify連携ではサポートされていません。web push for the Shopify integrationにご興味がある場合は、製品フィードバックを送信してください。

ステップ7: セットアップを完了する

1. セットアップの設定が完了したら、Finish Setup を選択します。
2. Shopifyテーマ設定でBrazeアプリ埋め込みを有効にします。Open Shopify を選択すると、Shopifyアカウントにリダイレクトされ、ストアのテーマ設定でアプリ埋め込みを有効にできます。

3. アプリ埋め込みを有効にすると、セットアップは完了です！ 連携設定、初期データ同期のステータス、およびアクティブなShopifyイベントを確認できることをご確認ください。