In Google Tag Manager, click a container.

In the navigation menu, click Tags, New.

In the upper-left corner of the tag pane, enter a name for your tag, for example, Engage JavaScript Library.

Click the Tag Configuration card.

In the Choose tag type pane, click Custom HTML.

In the HTML code block, paste the following Engage JavaScript Library script:

<script>
    // 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.1.0.min.js";
    var x = document.querySelector("script");
    x.parentNode.insertBefore(s, x);

    // Initialize the Engage JavaScript Library
    s.addEventListener("load", function () {
      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: false
    };

    window.Engage.init(settings).then(function (result) {
      engage = result;

      // Send a VIEW event
      // ...
    });
  });
</script>

Replace the placeholder values with the required details from your Sitecore CDP instance.

Click the Triggering card.

In the Choose a trigger pane, click DOM Ready. Your tag pane now looks similar to this:

In the upper-right corner of the tag pane, click Save.

On the main page, in the upper-right corner of the page, click Submit.

In the Submit Changes pane, in the Version Name field, enter a description, for example, Added Engage JavaScript Library.

Click Publish. Your website now loads the Engage JavaScript Library.

In Google Tag Manager, click the container that you worked on in the previous procedure.

In the navigation menu, click Tags.

In the upper-right corner, click Preview.

On the Tag Assistant page, enter your website's URL, then click Connect. Your website opens in a new window.

On the Tag Assistant page, find the tag you created in the previous procedure.

If the tag is listed under Tags Fired, you have successfully loaded the library on your website.

In your code editor, open the folder structure of your website.

In the folder where you store your JavaScript files, create a new JavaScript file.

Example: scripts/sitecore-engage-library.js

Open the JavaScript file and paste the following Engage JavaScript Library script:

// 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.1.0.min.js";
var x = document.querySelector("script");
x.parentNode.insertBefore(s, x);    

// Initialize the Engage JavaScript Library
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: false
    };
    engage = await window.Engage.init(settings);
    
    // Send a VIEW event
    // ...
});

Replace the placeholder values with the required details from your Sitecore CDP instance.

Save the JavaScript file.

Open the HTML file that imports scripts on every webpage of your website.

Import the JavaScript file that contains the library script into the HTML file. Import the JavaScript file as the first <script> element before the closing </body> tag.

Example: index.html

...
    <script src="scripts/sitecore-engage-library.js"></script>
    <script></script>
    <script></script>     
  </body>
</html>

In your web browser, open your website and the console. Keep the website and the console open for the rest of this walkthrough.

In the console, enter engage;.

If an object returns, you have successfully loaded the library on your website.

In your code editor, open the JavaScript file that contains the library script.

At the bottom of the s.addEventListener() function, below the engage = await window.Engage.init(settings); line, paste the following code:

// 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 CDP, Guests, Search field:");
console.log("bid:", engage.getBrowserId());

Replace the placeholder values with the required details from your Sitecore CDP instance.

This script creates a VIEW event object and sends the event data to Sitecore CDP immediately after the component renders for the first time. It also logs the browser ID to the console. You'll use the browser ID in the next procedure to find the VIEW event in Sitecore CDP.

In your web browser, reload the webpage. The VIEW event triggers and the event data is sent.

In your web browser's console, find a text similar to:

bid: a38b230c-11eb-4cf9-8d5d-274e9f344925​

Copy the text.

In Sitecore CDP, click Guests. Paste the copied text into the Search field.

An anonymous guest displays.

This guest is you loading your app just a minute ago. Next, you find the VIEW event associated with this guest.

Click the guest. The guest profile displays.

On the guest profile page, click Event viewer. A list of events associated with this guest displays. The list contains a VIEW event. This is the event that was triggered in the previous procedure.

In your terminal, open the root folder of your React app.

Install the Engage SDK by running the following command:

npm install @sitecore/engage

In your code editor, open the root folder of your React app.

In the src folder, create a file called engage.js.

In engage.js, paste the following code:

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
  });
};

loadEngage();
export { engage };

Replace the placeholder values with the required details from your Sitecore CDP instance.

This script:

In App.js, import useEffect from React and engage from engage.js:

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

In App.js, in the App function, call the engage.pageView() function to send VIEW event data:

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

export default function App() {
  useEffect(() => {
    if (engage !== undefined) {
      sendPageViewEvent();
    };
  }, []);

  const sendPageViewEvent = async () => {
    const response = await engage.pageView({
      channel: "<channel_PLACEHOLDER>",
      currency: "<currency_PLACEHOLDER>"
    });

    // For testing and debugging purposes only
    if (response) {
    console.log("Copy-paste the following line into Sitecore CDP, Guests, Search field:");
      console.log("bid:", engage.getBrowserId());
    };
  };

  return <></>;
}

Replace the placeholder values with the required details from your Sitecore CDP instance.

This script creates a VIEW event object and sends the event data to Sitecore CDP immediately after the component renders for the first time. It also logs the browser ID to the console. You'll use the browser ID in the next procedure to find the VIEW event in Sitecore CDP.

In your terminal, enter npm start to start your React app. When the webpage loads, the VIEW event triggers and the event data is sent.

In your terminal, open the root folder of your web server.

Install the Engage SDK by running the following command:

npm install @sitecore/engage

This walkthrough also uses the express and cors packages.

In your code editor, open the root folder of your web server.

In the file where you initialize Express (usually index.js or server.js), paste the following code:

import express from "express";
import cors from "cors";
import { initServer } from "@sitecore/engage";

const app = express();
app.use(cors({credentials: true, origin: true}));

const engageSettings = {
    clientKey: "<client_key_PLACEHOLDER>",
    targetURL: "<stream_api_target_endpoint_PLACEHOLDER>",
    pointOfSale: "<point_of_sale_PLACEHOLDER>",
    cookieDomain: "<cookie_domain_PLACEHOLDER>",
    cookieExpiryDays: 365,
    forceServerCookieMode: true,
    includeUTMParameters: true
};

const engageServer = initServer(engageSettings);

async function engageMiddleware(req, res, next) {
  await engageServer.handleCookie(req, res);
  next();
};

app.get("/api/v1/engageCookie", engageMiddleware, (req, res) => {
  res.json({
    status: "success"
  });
});

app.listen(5000, () => {console.log("listening on port 5000...")});

Replace the placeholder values with the required details from your Sitecore CDP instance.

Note the following about the script:

In your terminal, open the root folder of your React app.

Install the Engage SDK by running the following command:

npm install @sitecore/engage

In your code editor, open the root folder of your React app.

In the src folder, create a file called engage.js.

In engage.js, paste the following code:

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: true,
    includeUTMParameters: true
  });
};

loadEngage();
export { engage };

Replace the placeholder values with the required details from your Sitecore CDP instance.

This script:

In App.js, import useEffect and useCallback from React and engage from engage.js:

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

This walkthrough also uses the axios package.

In App.js, in the App function, in a Callback Hook, make a GET request to your web server (/api/v1/engageCookie) using Axios. Then, call the callback function in an Effect Hook on first render:

export default function App() {
  const setEngageCookie = useCallback(async () => {
      try {
          await axios.get("http://localhost:5000/api/v1/engageCookie", { withCredentials: true });
      } catch (error) {
          return null;
      }
  }, []);

  useEffect(() => {
      setEngageCookie();
  }, [setEngageCookie]);

// ...
}

This script ensures that when the client receives cookies from the server, it stores them in the web browser.

In your React app, in App.js, in the App function, under the previous Effect Hook, create another Effect Hook and call the engage.pageView() function to send VIEW event data:

export default function App() {
  // ...

  useEffect(() => {
      setEngageCookie();
  }, [setEngageCookie]);
  
  useEffect(() => {
    if (engage !== undefined) {
      sendPageViewEvent();
    };
  }, []);

  const sendPageViewEvent = async () => {
    const response = await engage.pageView({
      channel: "<channel_PLACEHOLDER>",
      currency: "<currency_PLACEHOLDER>"
    });

   // For testing and debugging purposes only
   if (response) {
      console.log("Copy-paste the following line into Sitecore CDP, Guests, Search field:");
      console.log("bid:", engage.getBrowserId());
   };
  };

  return <></>;
}

Replace the placeholder values with the required details from your Sitecore CDP instance.

This script creates a VIEW event object and sends the event data to Sitecore CDP immediately after the component renders for the first time. It also logs the browser ID to the console. You'll use the browser ID in the next procedure to find the VIEW event in Sitecore CDP.

In your terminal, start your web server and the client app. When the webpage loads, the VIEW event triggers and the event data is sent.

In your terminal, open the root folder of your Next app.

Install the Engage SDK by running the following command:

npm install @sitecore/engage

In your code editor, open the root folder of your Next app.

In the pages/api folder, create a file called engage.js.

In engage.js, paste the following code:

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
  });
};

loadEngage();
export { engage };

Replace the placeholder values with the required details from your Sitecore CDP instance.

This script:

In the pages folder, in index.js, import useEffect from React and engage from engage.js:

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

In index.js, in the Home function, call the engage.pageView() function to send VIEW event data:

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

export default function Home() {
  useEffect(() => {
    if (engage !== undefined) {
      sendPageViewEvent();
    };
  }, []);

  const sendPageViewEvent = async () => {
    const response = await engage.pageView({
      channel: "<channel_PLACEHOLDER>",
      currency: "<currency_PLACEHOLDER>"
    });

    // For testing and debugging purposes only
    if (response) {
    console.log("Copy-paste the following line into Sitecore CDP, Guests, Search field:");
      console.log("bid:", engage.getBrowserId());
    };
  };
}

Replace the placeholder values with the required details from your Sitecore CDP instance.

This script creates a VIEW event object and sends the event data to Sitecore CDP immediately after the component renders for the first time. It also logs the browser ID to the console. You'll use the browser ID in the next procedure to find the VIEW event in Sitecore CDP.

In your terminal, enter npm run dev to start your Next app. When the webpage loads, the VIEW event triggers and the event data is sent.

In your terminal, open the root folder of your Next app.

Install the Engage SDK by running the following command:

npm install @sitecore/engage

In your code editor, open the root folder of your Next app.

In the root folder, create a file called middleware.js.

In middleware.js paste the following code:

import { NextResponse } from 'next/server';
import { initServer } from '@sitecore/engage';

export async function middleware(request) {
  const response = NextResponse.next();

  const engageSettings = {
    clientKey: "<client_key_PLACEHOLDER>",
    targetURL: "<stream_api_target_endpoint_PLACEHOLDER>",
    pointOfSale: "<point_of_sale_PLACEHOLDER>",
    cookieDomain: "<cookie_domain_PLACEHOLDER>",
    cookieExpiryDays: 365,
    forceServerCookieMode: true
  };

  const engageServer = initServer(engageSettings);
  await engageServer.handleCookie(request, response);

  return response;
};

Replace the placeholder values with the required details from your Sitecore CDP instance.

This script:

In the pages folder, in index.js, import useEffect from React and init from @sitecore/engage:

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

Above the Home() function, create an object called engageSettings:

const engageSettings = {
  clientKey: "<client_key_PLACEHOLDER>",
  targetURL: "<stream_api_target_endpoint_PLACEHOLDER>",
  pointOfSale: "<point_of_sale_PLACEHOLDER>",
  forceServerCookieMode: true,
  includeUTMParameters: true,
  webPersonalization: false
};

Replace the placeholder values with the required details from your Sitecore CDP instance.

In the Home() function, create an empty, asynchronous function loadEngage(), then call loadEngage() in an Effect Hook. You should use the Effect Hook because the window object has to be present before you load the Engage API. You'll load the Engage API and start sending VIEW events inside loadEngage() in the next procedure.

export default function Home() {
  const loadEngage = async () => {
    // Load Engage API
    // Send VIEW events
  };
    
  useEffect(() => {
    loadEngage();
  }, []);

  return (
    <></>
  );
};

In the loadEngage() function, load the Engage API by passing engageSettings to the init() function. The init() function is asynchronous, so you must await the return value.

const loadEngage = async () => {
  // Load Engage API
  const engage = await init(engageSettings);

  // Send VIEW events
};

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.

In the loadEngage() function, after you load the Engage API, call the engage.pageView() function to send VIEW event data:

const loadEngage = async () => {
  // Load Engage API
  const engage = await init(engageSettings);  

  // Send VIEW events
  engage.pageView({
    channel: "<channel_PLACEHOLDER>",
    currency: "<currency_PLACEHOLDER>"
  });
};

Replace the placeholder values with the event details specific to your organization.

For testing and debugging purposes only, below the engage.pageView() function, log the browser ID to the console:

const loadEngage = async () => {
  // Load Engage API
  // ...

  // Send VIEW events
  // ...

  // For testing and debugging purposes only
  console.log("Copy-paste the following line into Sitecore CDP, Guests, Search field:");
  console.log("bid:", engage.getBrowserId());
};

You'll use the browser ID in the next procedure to find the VIEW event in Sitecore CDP.

In your terminal, enter npm run dev to start your Next app. When the webpage loads, the VIEW event triggers and the event data is sent.