Skip to main content
Users
CloudPortalLogin
  • Powered byPowered by
Developing with Sitecore Personalize
Data privacy
Before you start sending data
Integrating with Sitecore Personalize
Stream API
Personalize API Flow execution
REST APIs
  • Sitecore Personalize for developers
  • Integrating with Sitecore Personalize
  • Walkthroughs for integrating
  • Integrate using the Engage SDK script and Google Tag Manager

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 Personalize 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:

  1. In Google Tag Manager, click a container.

  2. In the navigation menu, click Tags > New.

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

  4. Click the Tag Configuration card.

  5. In the Choose tag type pane, click Custom HTML.

  6. 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: true /* 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 Personalize instance.

    Cookie consent

    In production, only load the Engage SDK and set cookies if your site visitor grants consent. See also a code example to check if your site visitor accepts cookies.

    Content Security Policy (CSP)

    To ensure that the Engage SDK script loads, you might have to add the following to your Content Security Policy (CSP):

    • Your Stream API target endpoint.

    • https://d1mj578wat5n4o.cloudfront.net

    • If you run web personalization and your environment is AP Region, EU Region, or US Region:

      https://d35vb5cccm4xzp.cloudfront.net

    • If you run web personalization and your environment is JP Region:

      https://d2ez8k04aaol9g.cloudfront.net

  7. Click the Triggering card.

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

    Tag configuration in Google Tag Manager.
  9. In the upper-right corner of the tag pane, click Save.

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

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

  12. 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:

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

  2. In the navigation menu, click Tags.

  3. In the upper-right corner, click Preview.

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

  5. 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 Personalize. You sent an event from your website, and Sitecore Personalize now captures data about your users in real time.

Next, you can:

  • Send other behavioral data, for example, an IDENTITY event or a custom event.

  • Send transactional data as the user interacts with products and shopping carts on your site.

  • Run experiences and experiments.

Do you have some feedback for us?

If you have suggestions for improving this article,

Privacy policySitecore Trust CenterCopyright © 1999-2025 Sitecore