Integrate using the Engage SDK script and Google Tag Manager

This topic explains how to integrate your website using the Engage SDK script and Google Tag Manager (GTM).

This walkthrough assumes that you:

Have collected the required details about your Sitecore CDP instance.
Are familiar with Google Tag Manager and have a workspace there to work with.

This walkthrough describes how to:

Add a tag for the Engage SDK to your website.
Verify that the script loads on your website.
Add more tags to your website.

Add a tag for the Engage SDK to your website

The first step to integrating your website is to configure and publish a new Google Tag Manager tag for your website. The tag contains the Engage SDK script and fires when the DOM is ready. The script initializes the Engage SDK and sends VIEW events from your website.

To add a tag to your website:

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 SDK.
Click the Tag Configuration card.
In the Choose tag type pane, click Custom HTML.

In the HTML code block, paste the following Engage SDK script:

RequestResponse

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

    // Initialize the Engage SDK
    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 /* boolean or object. See Settings object for all options. Default: false */
    };

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

      // Send a VIEW event
      var event = {
        channel: "<channel_PLACEHOLDER>",
        language: "<language_PLACEHOLDER>",
        currency: "<currency_PLACEHOLDER>",
        page: "{{Page Path}}"
      };
     engage.pageView(event);
    });
  });
</script>

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

Important

To ensure that the Engage SDK script loads, you might have to add https://d1mj578wat5n4o.cloudfront.net to your Content Security Policy (CSP).

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 SDK.
Click Publish. Your website now loads the Engage SDK and sends VIEW events.

Verify that the script loads on your website

After you have added the tag, you can preview your Google Tag Manager container and verify that the tag for the Engage SDK fires on your website.

To verify that the Engage SDK script loads on your website:

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 script on your website and sent a VIEW event.

Add more tags to your website

The Engage SDK now loads on your website, and collects and sends VIEW events. To collect and send other event data, you can add tags to send other events.

Next steps

You've now successfully integrated your website with Sitecore CDP. You sent an event from your website, and Sitecore CDP now captures data about your users in real time.

Do you have some feedback for us?

If you have suggestions for improving this article,