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を返す、公開アクセス可能なGETエンドポイントを作成する必要があります。Brazeは以下の2つのソースからこのエンドポイントを呼び出します。

重要

Brazeサーバーとショッパーのブラウザーの両方がこのエンドポイントを呼び出します。Braze Shopify Webピクセルはエンドポイントの URLをブラウザーに読み込むため、URLは公開されます。検証の手順に従って、一致するShopify顧客に対してのみexternal IDを返すようにしてください。

エンドポイント仕様

メソッド: GET

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

サンプルエンドポイント

1

GET https://mystore.com/custom_id?shopify_customer_id=1234&[email protected]&shopify_storefront=dev-store.myshopify.com

期待されるレスポンス

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

1
2
3

{
  "external_id": "my_external_id"
}

検証

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のオプトインを収集する（オプション）

メールまたはSMSチャネルを使用している場合、ShopifyのメールおよびSMSマーケティングオプトイン状態をBrazeに同期できます。

• メール
• smsダブルオプトイン

Shopifyからメールマーケティングのオプトインを同期すると、Brazeはその特定のストアに関連付けられたすべてのユーザーに対してメール購読グループを自動的に作成します。この購読グループには一意の名前を設定する必要があります。

注

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

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

SMSダブルオプトインを使用すると、Shopifyの確認メールの代わりに、Brazeを通じてブランド確認テキストを送信できます。SMSダブルオプトインを有効にするには、以下の手順を実行します。

1. Shopify管理画面で、設定 > 通知 > 顧客通知に移動します。
2. SMSのマーケティングダブルオプトインをオフにします。
3. チェックアウトSMSをシングルオプトインに設定します。
4. BrazeのSMS設定で、Use Braze SMS double opt-inを選択します。

BrazeのSMSダブルオプトインと購読者フローの詳細については、Shopify概要を参照してください。

ステップ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は、接続されたすべてのShopifyストアで共有される以下のバナー配置をワークスペースごとに1回自動的に作成します：

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

注

複数の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 イベントを確認できることを確認してください。