Engage.init(設定)

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

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

非同期init() 関数は、アプリのクライアント側でEngage SDKを初期化します。この関数は、windowオブジェクトが定義された後、他のEngage関数を呼び出す前に呼び出してください。

初期化中に、この関数はブラウザIDを作成し、ブラウザにCookieとして格納します。

パラメーター	種類	形容
settings	オブジェクト	Sitecore CDPインスタンスとCookieの設定に関する詳細。

Example 1. 例: Engage SDKスクリプト

init() 関数の使用方法の例を次に示します。init() 関数を非同期的に呼び出し、戻り値を変数に保存する必要があります。

// 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 () => {
    const 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: false /* boolean or object. See Settings object for all options. Default: false */
    };
    engage = await window.Engage.init(settings);
});

Example 2. 例: Engage SDKパッケージ

Reactアプリでinit() 関数を使用する方法の例を次に示します。 init() 関数を非同期的に呼び出し、戻り値を変数に保存する必要があります。

Engage関数をウィンドウオブジェクトに公開するには、戻り値をwindowオブジェクトに割り当てます。これは、Sitecore PersonalizeのWebエクスペリエンスまたはWeb実験内でEngage関数を呼び出すために行う必要があります。

運用環境では、init() 関数を一度呼び出してから、選択した状態管理ソリューション (React ContextやReduxなど) を使用してアプリ全体で共有する必要があります。

engage.js:

import { init } from "@sitecore/engage";

let engage;

const loadEngage = async () => {
  engage = await init({
    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: false /* boolean or object. See Settings object for all options. Default: false */
  });

  // Expose Engage functions to the window object:
  window.engage = engage;
};

loadEngage();
export { engage };

App.js:

import { useEffect } from "react";
import { engage } from "./engage.js";

export default function App() {
    useEffect(() => {
    if (engage !== undefined) {
        // Send VIEW event
    };
    }, []);
// ...
}

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