Engage SDKスクリプトを使用した統合

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

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

このトピックでは、Engage SDKを使用してWebサイトを統合する方法について説明します。

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

Sitecore Personalizeインスタンスに関する必要な詳細を収集している。
HTML、JavaScript、およびWebブラウザの開発者ツールに精通している。
統合するウェブサイトがある。

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

スクリプトをWebサイトに読み込みます。
スクリプトがWebサイトに読み込まれることを確認します。
初めてのVIEWイベントSend。
Sitecore PersonalizeがVIEWイベントをキャプチャしたことを確認します。

スクリプトをWebサイトに読み込みます

ウェブサイトを統合するための最初のステップは、HTML <script>タグを使用してウェブサイトのすべてのウェブページにEngage SDKスクリプトを読み込むことです。

スクリプトをロードするには:

コードエディタで、Webサイトのフォルダ構造を開きます。
JavaScriptファイルを保存したフォルダに、新しいJavaScriptファイルを作成します。

例： scripts/sitecore-engage.js

JavaScriptファイルを開き、次の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インスタンスの必要な詳細に置き換えます。

コンテンツセキュリティポリシー(CSP)

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

JavaScriptファイルを保存します。
WebサイトのすべてのWebページでスクリプトをインポートするHTMLファイルを開きます。
スクリプトを含むJavaScriptファイルをHTMLファイルにインポートします。JavaScriptファイルを、終了タグの前の <script> 要素として </body> インポートします。

大事な

ウェブサイトのアーキテクチャによっては、<script> タグをHTMLの別の場所に配置したい場合があります。JavaScriptファイルをインポートする場所は、ウェブエクスペリエンスとウェブテストのパフォーマンスに影響します。

例： index.html
<html> <head></head> <body> ... <script src="scripts/sitecore-engage.js"></script> <script></script> <script></script> </body> </html>

スクリプトがWebサイトに読み込まれることを確認します

Engage SDKスクリプトがWebサイトに読み込まれることを確認するには:

Webブラウザーで、Webサイトとコンソールを開きます。このチュートリアルの残りの部分では、ウェブサイトとコンソールを開いたままにしておきます。
コンソールで、「 engage;」と入力します。

オブジェクトが返された場合、スクリプトはWebサイトに正常にロードされています。

初めてのVIEWイベントSend

スクリプトがWebサイトに読み込まれることを確認したら、データを収集してSitecore Personalizeに送信します。VIEWイベントは、Webページが読み込まれるたびにトリガーされるため、VIEWイベントを送信します。

VIEWイベントを送信するには:

コードエディターで、スクリプトを含むJavaScriptファイルを開きます。

s.addEventListener() 関数の下部、engage = await window.Engage.init(settings); 行の下に、次のコードを貼り付けます。

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

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

// For testing and debugging purposes only
console.log("Copy-paste the following line into Sitecore Personalize > Developer center > Event viewer > Search field:");
console.log(engage.getBrowserId());

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

このスクリプトは、VIEWイベントオブジェクトを作成し、コンポーネントが初めてレンダリングされた直後にイベントデータをSitecore Personalizeに送信します。また、ブラウザIDをコンソールに記録します。次の手順では、ブラウザー IDを使用して、Sitecore PersonalizeでVIEWイベントを検索します。

Webブラウザーで、Webページを再読み込みします。VIEWイベントがトリガーされ、イベントデータが送信されます。

Sitecore PersonalizeがVIEWイベントをキャプチャしたことを確認します

VIEWイベントを送信した後、Sitecore Personalizeにログインしてイベントを見つけます。

Sitecore PersonalizeがVIEWイベントをキャプチャしたことを確認するには:

Webブラウザーのコンソールで、次のようなテキストを見つけます。

a38b230c-11eb-4cf9-8d5d-274e9f344925
テキストをコピーします。
Sitecore PersonalizeでDeveloper center > Event viewerをクリックし、検索ドロップダウンで「Browser ID」を選択し、コピーしたテキストを検索フィールドに貼り付けます。このゲストに関連付けられているイベントのリストが表示されます。このリストにはVIEWイベントが含まれています。これは、前の手順でトリガーされたイベントです。

メモ

Sitecore CDPとSitecore Personalizeの両方がある場合は、Guestsでデータを見つけることができます。

次のステップ

これで、WebサイトをSitecore Personalizeとの統合に成功しました。ウェブサイトからイベントを送信し、Sitecore Personalizeがユーザーに関するデータをリアルタイムでキャプチャすることを確認しました。

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