Boxever JavaScript LibraryからEngage SDK

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

March 2023より前に組織でSitecore Personalizeの使用を開始した場合、アプリはおそらくBoxever JavaScript Libraryを使用して統合されています。Boxever JavaScript Libraryは更新プログラムを受信しなくなったため、代わりにEngage SDKにアップグレードすることをお勧めします。

このチュートリアルでは、次のことを前提としています。

Boxever JavaScript Libraryを使用するアプリを用意します。
HTML、JavaScript、およびWebブラウザの開発者ツールに精通している。

このチュートリアルでは、次の方法について説明します。

初期化スクリプトを更新します。
VIEWイベント・スクリプトを更新します。
他のイベントを送信するためのスクリプトを更新します。
パーソナライゼーションを実行するためのスクリプトを更新します。

初期化スクリプトを更新する

Engage SDKを初期化するには、Boxever JavaScript Libraryを初期化するための既存のスクリプトを新しいスクリプトに置き換えます。

Boxever JavaScript Libraryを初期化するための既存のスクリプトは、次のようになります。

// Define the Boxever queue 
var _boxeverq = _boxeverq || [];

// Define the Boxever settings 
var _boxever_settings = {
    client_key: "<client_key_PLACEHOLDER>",
    target: "<stream_api_target_endpoint_PLACEHOLDER>/v1.2",
    cookie_domain: "<cookie_domain_PLACEHOLDER>",
    pointOfSale: "<point_of_sale_PLACEHOLDER>",
    web_flow_target: "<web_flow_target_PLACEHOLDER>",
    web_flow_config: { async: false, defer: false },
    javascriptLibraryVersion: "1.4.9"
};

// Load the Boxever JavaScript Library asynchronously 
(function() {
     var s = document.createElement("script");
     s.type = "text/javascript";
     s.async = true;  
     s.src = "https://d1mj578wat5n4o.cloudfront.net/boxever-" + window._boxever_settings.javascriptLibraryVersion + ".min.js";
     var x = document.getElementsByTagName("script")[0]; x.parentNode.insertBefore(s, x);
})();

Engage SDKを初期化するための新しいスクリプトを次に示します。

// Initialize the engage variable
var engage = undefined;

// Create and inject the <script> tag into the HTML
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://d1mj578wat5n4o.cloudfront.net/sitecore-engage-v.1.4.3.min.js";
var x = document.querySelector("script");
x.parentNode.insertBefore(s, x);    

// Initialize the Engage SDK
s.addEventListener("load", async () => {
    var settings = {
        clientKey: "<client_key_PLACEHOLDER>",
        targetURL: "<stream_api_target_endpoint_PLACEHOLDER>",
        pointOfSale: "<point_of_sale_PLACEHOLDER>",
        cookieDomain: "<cookie_domain_PLACEHOLDER>",
        cookieExpiryDays: 365,
        forceServerCookieMode: false,
        includeUTMParameters: true,
        webPersonalization: true /* boolean or object. See Settings object for all options. Default: false */
    };
    engage = await window.Engage.init(settings);

    // Send a VIEW event
    // ...
});

プレースホルダーの値を、Sitecore Personalizeインスタンスの必要な詳細に置き換えます。

Engage SDKスクリプトについては、次の点に注意してください。

engage変数は次のように初期化されますundefined。
<script>タグが読み込まれると、非同期init()関数によってウェブページにEngage SDKが読み込まれます。engage変数は、init() 関数の戻り値に再代入されます。
settingsオブジェクトには、Boxever JavaScript Libraryの _boxever_settingsとは異なる属性があります。たとえば、client_keyがclientKeyになり、targetがtargetURLになります。
Engage SDKスクリプトを確実に読み込むには、コンテンツセキュリティポリシー(CSP)に次のものを追加する必要があります。
- Stream APIターゲットエンドポイント。
- https://d1mj578wat5n4o.cloudfront.net
- Webパーソナライゼーションを実行し、環境がAP Region、EU Region、またはUS Regionの場合:
  
  https://d35vb5cccm4xzp.cloudfront.net
- Webパーソナライゼーションを実行し、環境がJP Regionの場合:
  
  https://d2ez8k04aaol9g.cloudfront.net
本番環境では、サイトの訪問者が同意した場合にのみ、Engage SDKを読み込み、Cookieを設定します。サイト訪問者がCookieを受け入れるかどうかを確認するためのコード例も参照してください。

Engage.init() 関数と設定オブジェクトの詳細をご覧ください。

VIEWイベント・スクリプトの更新

VIEWイベントを送信するには、Boxever JavaScript Libraryを使用してVIEWイベントを送信するための既存のスクリプトを、Engage SDKを使用して新しいスクリプトに置き換えます。

Boxever JavaScript Libraryを使用した既存のスクリプト:

_boxeverq.push(() => {
    // Create a "VIEW" event object
    var viewEvent = {
        browser_id: Boxever.getID(),
        channel: "<channel_PLACEHOLDER>",
        type: "<type_PLACEHOLDER>",
        language: "<language_PLACEHOLDER>",
        currency: "<currency_PLACEHOLDER>",
        page: "<page_PLACEHOLDER>",
        pos: "<point_of_sale_PLACEHOLDER>"
    };

    // Send the event data to the server
    Boxever.eventCreate(
        viewEvent,
        () => {},
        "json"
    );
});

次に、Engage SDKを使用してVIEWイベントを送信するための新しいスクリプトを示します。これをs.addEventListener() 関数の下部、engage = await window.Engage.init(settings); 行の下に配置します。

// VIEW event object
var eventData = {
    channel: "<channel_PLACEHOLDER>",
    language: "<language_PLACEHOLDER>",
    currency: "<currency_PLACEHOLDER>",
    page: "<page_PLACEHOLDER>",
    pointOfSale: "<point_of_sale_PLACEHOLDER>"
};

// Send a VIEW event
engage.pageView(eventData);

プレースホルダーの値を、組織に固有のイベントデータオブジェクト値に置き換えます。

Engage SDKスクリプトについては、次の点に注意してください。

イベントオブジェクトの属性は、Boxever JavaScript Libraryとは異なります。 browser_idとtypeはイベントオブジェクトの一部ではなくなりました。 posはpointOfSaleになりました。
VIEWイベントには、Engage.pageView()という専用関数があります。

他のイベントを送信するためのスクリプトを更新する

既存のBoxever JavaScript Libraryスクリプトでは、Boxever.eventCreate() 関数を使用して任意のタイプのイベントを送信しています。ただし、Engage SDKでは、一部のイベントタイプには独自の機能があります。

イベントを送信するには、既存のBoxever.eventCreate() 関数を次の表の該当する関数に置き換えます。

イベントの種類	機能
眺める	Engage.pageView()
同一性	Engage.identity()
ORDER_CHECKOUT 足す確認するチェックアウト支払い CLEAR_CART Search カスタムイベント	Engage.event()

個人用設定を実行するためのスクリプトを更新する

既存のBoxever JavaScript Libraryスクリプトでは、Boxever.callFlows() 関数を使用してエクスペリエンスと実験を実行しています。

Engage SDKを使用してパーソナライゼーションを実行するには、Engage.personalize() 関数を使用します。

次のステップ

これで、Boxever JavaScript LibraryからEngage SDKに正常にアップグレードされました。 Engage SDKを初期化し、イベントを送信するためのスクリプトを更新しました。

次に、次の操作を実行できます。

詳しくは、Engage SDKを使用した行動データとトランザクションデータの送信についての記事をご覧ください。

この記事を改善するための提案がある場合は、お知らせください!