Sitecore Personalize can be used to personalize pages using client-side JavaScript. In this article, we will show you how to test personalization using a browser extension for sites that have not yet embedded tags.
About Tampermonkey
This tool is a browser extension tool that allows you to embed and run JavaScript on the sites you visit.
Available browsers are as follows
- Google Chrome
- Microsoft Edge
- FireFox
- Safari
- Opera
I have this extension installed on Google Chrome or Microsoft Edge in my environment and use it for testing and demos.
Simple script execution
First, we would like to run a simple script. In this case, we will use the Sitecore documentation site as our target.
If you access the above site with the extension already installed and click on the Tampermonky icon, the following menu will appear. First, click on Dashboard.
The screen already contains some samples, but the default is nothing.
Click on the + button on the far left to create a new script.
The default generated script entry has been rewritten this time as follows
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...
})();Their respective roles are as follows
Name | Description |
|---|---|
name | Script Name |
match | Conditions under which scripts are enabled, * available |
icon | Icons used in the list |
If you visit the site again after saving the above settings, you will see that it is enabled as shown in the following screen.
Display personalization on specific sites
As a sample of the tampermonkey sample, we have prepared the following code in this case.
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();
}
}
})();In the above code, YOUR-CLIENT-KEY and YOUR-ENDPOINT should be prepared for your environment. The list of Endpoints is as follows
For pointOfSales, please prepare a StandardDemo on the Sitecore Personalize side.
This completes the configuration on the tampermonkey side.
Preview with Sitecore Personalize
In this case, to test personalization on a site that is not linked using Tampermonkey, the preview will only be available on sites that have the extension for the browser.
The Preview button is located in the upper right corner of the personalization settings screen that you created in the previous article.
Upon clicking, a dialog box will appear asking which page to preview.
A preview is displayed and a popup is added in the lower right corner, indicating that the script you configured in Tampermonkey has been loaded and is working.
Open the developer tools and look at the execution results to see that the page event is executed after the library is loaded.
Check QA Tool
The QA tool is displayed when launched in preview. The icon on the left side of the screen is the QA Tool.
Clicking on it brings up the QA tool, which displays information about how this personalization works.
QA tools can also be used to determine the cause of problems, and we may introduce them again in the future.
Summary
In this article, we introduced the process of using Tampermoneky to test against sites that have not been configured for personalization. We hope you will try this at least once, as it may be used in cases where you actually want to run the test using data from a non-production environment during development.