Tampermonkey を利用して Personalize のテスト : Haramizu.com

Tampermonkey を利用して Personalize のテスト

公開日: 2024-10-18

Sitecore Personalize はクライアント側の JavaScript を利用してページのパーソナライズなどが可能です。今回は、まだタグを埋め込んでいないサイトに対してブラウザの拡張機能を利用して、パーソナライズのテストをする方法を紹介します。

Tampermonkey について

このツールはブラウザの機能拡張のツールで、アクセスをしたサイトに対して JavaScript を埋め込んで動作させるということができます。

https://www.tampermonkey.net/

利用できるブラウザは以下の通りです。

Google Chrome
Microsoft Edge
FireFox
Safari
Opera

私は手元の環境で Google Chrome もしくは Microsoft Edge でこの機能拡張をインストールしており、テストやデモなどで利用しています。

シンプルなスクリプトの実行

まず最初に、シンプルなスクリプトを実行したいと思います。今回は対象として、Sitecore のドキュメントサイトとします。

https://doc.sitecore.com/personalize

すでに機能拡張をインストールしている状態で上記のサイトにアクセスをして、Tampermonky のアイコンをクリックすると、以下のようなメニューが表示されます。まずは Dashboard をクリックしてください。

画面ではすでにいくつかサンプルを入れていますが、デフォルトでは何も入っていない状態です。

一番左側にある + のボタンをクリックして新しいスクリプトを作成します。

デフォルトで生成されるスクリプトの項目を今回は以下のように書き換えました。

JavaScript

// ==UserScript==
// @name         Haramizu.com Blog Sample
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       Shinichi Haramizu
// @match        https://doc.sitecore.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=www.sitecore.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

それぞれの役割は以下の通りです。

Name	Description
name	スクリプトの名前
match	スクリプトが有効になる条件、* を利用可能
icon	一覧で利用するアイコン

上記の設定で保存をしたあとにサイトに改めて訪問をすると、以下の画面のように有効になっているのが分かります。

特定サイトでパーソナライズを表示する

今回は tampermonkey のサンプルのサンプルとして、今回は以下のコードを用意しました。

JavaScript

// ==UserScript==
// @name         Haramizu.com Blog Sample
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       Shinichi Haramizu
// @match        https://doc.sitecore.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=www.sitecore.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    //Sitecore CDP settings
    const SITECORECDP_CLIENT_KEY = "YOUR-CLIENT-KEY";
    const SITECORECDP_API_TARGET = "YOUR-ENDPOINT/v1.2";
    const SITECORECDP_POINT_OF_SALE = "StandardDemo";
    const SITECORECDP_WEB_FLOW_TARGET = "https://d35vb5cccm4xzp.cloudfront.net";
    const SITECORECDP_JS_LIB_SRC = "https://d1mj578wat5n4o.cloudfront.net/boxever-1.4.1.min.js";
    const SITECORECDP_COOKIE_DOMAIN = '.sitecore.com';
    const CURRENCY = "JPY";

    //Script settings
    const SEND_VIEW_EVENT = true;

    window._boxever_settings = {
        client_key: SITECORECDP_CLIENT_KEY,
        target: SITECORECDP_API_TARGET,
        pointOfSale: SITECORECDP_POINT_OF_SALE,
        cookie_domain: SITECORECDP_COOKIE_DOMAIN,
        web_flow_target: SITECORECDP_WEB_FLOW_TARGET,
        //web_flow_config: { async: false, defer: false }
    };

    loadScCdpLib();
    if (SEND_VIEW_EVENT) {
        delayUntilBrowserIdIsAvailable(sendViewEvent);
    }

    function loadScCdpLib(callback) {
        console.log('Sitecore CDP Tampermonkey script - loadScCdpLib');
        var scriptElement = document.createElement('script');
        scriptElement.type = 'text/javascript';
        scriptElement.src = SITECORECDP_JS_LIB_SRC;
        scriptElement.async = false;
        document.head.appendChild(scriptElement);
    }

    function sendViewEvent() {
        console.log('Sitecore CDP Tampermonkey script - sendViewEvent');
        var viewEvent = {
            "browser_id": Boxever.getID(),
            "channel": "WEB",
            "type": "VIEW",
            "language": "EN",
            "currency": CURRENCY,
            "page": window.location.href + window.location.search,
            "pos": SITECORECDP_POINT_OF_SALE,
            "session_data": {
                "uri": window.location.pathname
            }
        };
        Boxever.eventCreate(viewEvent, function(data) {}, 'json');
        console.log('view event');
    }

    function delayUntilBrowserIdIsAvailable(functionToDelay) {
        if (window.Boxever == null || window.Boxever == undefined || window.Boxever === "undefined" || window.Boxever.getID() === "anonymous") {
            const timeToWaitInMilliseconds = 300;
            console.log(`Sitecore CDP browserId is not yet available. Waiting ${timeToWaitInMilliseconds}ms before retrying.`);
            window.setTimeout(delayUntilBrowserIdIsAvailable, timeToWaitInMilliseconds, functionToDelay);
        } else {
            functionToDelay();
        }
    }
})();

上記のコードのうち、YOUR-CLIENT-KEY および YOUR-ENDPOINT に関しては環境に合わせて準備をしてください。Endpoint の一覧は以下の通りです。