Engage.init(settings)
The asynchronous init() function initializes the Engage SDK on the client side of your app. Call this function after the window object is defined and before you call any other Engage functions.
During initialization, the function creates a browser ID and stores it as a cookie in the browser.
Here's an example of how to use the init() function. You must call the init() function asynchronously and save the return value into a variable.
// 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);
});Here's an example of how to use the init() function in a React app. You must call the init() function asynchronously and save the return value into a variable.
You can expose Engage functions to the window object by assigning the return value to the window object. You must do this in order to call Engage functions inside your web experience or web experiment in Sitecore Personalize.
In production, you should call the init() function once, then share it across the app using the state management solution of your choice, for example, React Context or 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
};
}, []);
// ...
}