---
title: "Boxever JavaScriptライブラリからEngage SDKへのアップグレード"
slug: "upgrade-from-bx-to-engage-sdk"
abstract: "既存のレガシーなBoxever JavaScriptライブラリ統合から、Engage SDKを使ったモダンな統合へ移行する方法。"
---
# Boxever JavaScriptライブラリからEngage SDKへのアップグレード

もし御社が2023年3月以前にSitecore CDPを使い始めたなら、アプリはおそらくBoxever JavaScriptライブラリを使って統合されているでしょう。Boxever JavaScriptライブラリは更新を受け取っていないため、代わりにEngage SDKへのアップグレードをお勧めします。

このウォークスルーでは、以下の方法を説明します:

> !注**始める前に**
> 
> -   Boxever JavaScriptライブラリを使うアプリを持っています。
>     
> -   HTML、JavaScript、そしてウェブブラウザの開発者ツールに慣れていることを確認してください。
>     

## 初期化スクリプトを更新してください

Engage SDKを初期化するには、Boxever JavaScriptライブラリの初期化用スクリプトを新しいスクリプトに置き換えてください。

Boxever JavaScriptライブラリの初期化用スクリプトは、以下のような見た目です:

// 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. Set to \`false\` if you don't have Personalize. \*/
 };
 engage = await window.Engage.init(settings);

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

プレースホルダーの値は、[Sitecore CDPインスタンスの必要な詳細に置き換えてください。](../preparing-to-integrate/collect-required-details.md "Collect required details")

Engage SDKスクリプトに関する以下の詳細にご注意ください。

-   engage変数はundefinedとして初期化されます。
    
-   <script>タグが読み込まれた後、非同期init()関数がEngage SDKをウェブページに読み込みます。engage変数は、init()関数の返り値に再割り当てされます。
    
-   settingsオブジェクトはBoxever JavaScriptライブラリの\_boxever\_settingsとは異なる属性を持ちます。例えば、client\_keyは現在clientKey、targetはtargetURLです。
    
-   Engage SDKスクリプトが読み込まれるようにするために、[コンテンツセキュリティポリシー(CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)に以下を追加する必要があるかもしれません:
    
    -   Stream [APIのターゲットエンドポイント](collect-required-details.html#UUID-60c4c930-3cfe-e0ad-3b98-69ceff75989f_section-idm1903325950147122 "Stream API target endpoint")。
        
    -   https://d1mj578wat5n4o.cloudfront.net
        
    -   ウェブパーソナライゼーションを実行していて、環境が**AP地域**、**EU地域**、**または米国地域**であれば:
        
        https://d35vb5cccm4xzp.cloudfront.net
        
    -   ウェブパーソナライゼーションを使い、環境が**JP地域**であれば:
        
        https://d2ez8k04aaol9g.cloudfront.net
        
-   本番環境では、サイト訪問者が同意した場合のみEngage SDKを読み込み、クッキーを設定してください。サイト訪問者がクッキーを受け入れているかどうかを確認する [コード例](../understanding-integration-details/cookies.md "Cookies") もご覧ください。
    

[Engage.init()](../../stream-api/sitecore-engage-sdk-reference/functions/engage-init.md "Engage.init(settings)")関数と[設定オブジェクト](../../stream-api/sitecore-engage-sdk-reference/objects/settings-object.md "Settings object")について詳しく学びましょう。

## VIEWイベントスクリプトを更新してください

VIEWイベントを送信するには、Boxever JavaScriptライブラリで送信する既存のスクリプトをEngage SDKの新しいスクリプトに置き換えてください。

Boxever JavaScriptライブラリを使っている既存のスクリプト:

\_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);

プレースホルダーの値は、組織固有の [イベントデータオブジェクトの値](../../stream-api/sitecore-engage-sdk-reference/objects/event-data-object/event-data-object.md "Event data object") に置き換えてください。

Engage SDKスクリプトに関する以下の詳細にご注意ください。

-   イベントオブジェクトはBoxever JavaScriptライブラリとは異なる属性を持ちます。 browser\_id と type はもはやイベントオブジェクトの一部ではありません。 pos は pointOfSaleになっています。
-   VIEWイベントには [Engage.pageView()](../../stream-api/sitecore-engage-sdk-reference/functions/engage-pageview.md "Engage.pageView(eventData[, extensionData])")という専用関数があります。

## 他のイベントを送信するためのスクリプトを更新してください

既存のBoxever JavaScript Libraryスクリプトでは、Boxever.eventCreate() 関数を使ってあらゆる種類のイベントを送信しています。しかし、Engage SDKでは、いくつかのイベントタイプに独自の関数があります。

イベントを送信するには、既存のBoxever.eventCreate() 関数を以下の表の該当する関数に置き換えてください:

イベントの種類

機能

ビュー

[Engage.pageView()](engage-pageview.html)

アイデンティティ

[Engage.identity()](engage-identity.html)

-   ORDER\_CHECKOUT
-   ADD
-   確認
-   チェックアウト
-   支払い
-   CLEAR\_CART
-   Search
-   カスタムイベント

[Engage.event()](engage-event.html)

## 今後のステップ

これでBoxever JavaScriptライブラリからEngage SDKへのアップグレードに成功しました。Engage SDKを初期化し、イベント送信用のスクリプトを更新しました。

次に、次のことができます:

-   Engage SDKを使った [行動](../understanding-integration-details/sending-events-using-the-engage-sdk.md "Sending events using the Engage SDK") および [トランザクション](../understanding-integration-details/sending-orders-using-the-engage-sdk.md "Sending orders using the Engage SDK") データの送信について詳しく学びましょう。