Configurations

Add the Marketing Cloud Personalization Beacon and Supporting Scripts to the Experience Cloud Website

1. Add your Experience Cloud domains to the allowed domains list in Marketing Cloud Personalization.
2. Locate and copy the integration code for the Marketing Cloud Personalization JavaScript beacon.
3. Make sure that your integration code looks similar to this code, where {account} is your Marketing Cloud Personalization account name and {dataset} is the name of your Marketing Cloud Personalization dataset:

   <script type="text/javascript"
   src="//cdn.evgnet.com/beacon/{account}/{dataset}/scripts/evergage.min.js"></script>

4. In Experience Builder, click Settings, Advanced, and then Edit Head Markup to add markup to the head of every page. Paste the Marketing Cloud Personalization JavaScript beacon code into the head markup.
5. Paste supporting inline scripts from the GitHub source code into the head markup after the Marketing Cloud Personalization JavaScript beacon code.
6. In Experience Builder, click Settings, then Security & Privacy. Under Content Security Policy (CSP), find Security Level. Click the dropdown, and then select Relaxed CSP: Permit Access to Inline Scripts and Allowed Hosts.
7. In Experience Builder, click Settings, then Security & Privacy. Under Content Security Policy (CSP), find Trusted Sites for Scripts. Click Add Trusted Site, and then add these three URLs.
   1. Copy the URL in the Marketing Cloud Personalization JavaScript beacon code as in step 2. For example, https://cdn.evgnet.com/beacon/{account}/{dataset}/scripts/evergage.min.js
   2. https://cdn.evgnet.com/
   3. Your Marketing Cloud Personalization account Base URL. Click Gears in the main menu of Marketing Cloud Personalization. Copy the URL in your browser’s address bar. For example, https://companyname.us-1.evergage.com/
8. Follow instructions from this article to add these three trusted URLs in Setup.
   • https://cdn.evgnet.com/
   • https://cdn.evergage.com/
   • Your Marketing Cloud Personalization account Base URL. Click Gears in the main menu of Marketing Cloud Personalization. Copy the URL in your browser’s address bar. For example, https://companyname.us-1.evergage.com/

Use the Examples Provided To Build Your Own Personalization Components and Deploy Them To Your Org

Refer to the instructions in:View and edit the source code using Workbench or the Visual Studio Code editor.

• GitHub source code
• LWC documentation

Add and Configure Marketing Cloud Personalization Components on Your Target Pages

1. After installing the custom components, open Experience Builder on the site you want to enable Marketing Cloud Personalization.
2. In Experience Builder, click the Lightning Components icon to expand the components panel. If your installation was successful, you see two new components towards the bottom of the components panel, under the Custom Components section. The names of these two components differ depending on whether you installed them via managed package, source code from Github, or updates to your own existing custom components. Look for two components named IS Data Capture and IS Personalization Block.
3. Drag and drop each of those components onto the page you want to serve your Marketing Cloud Personalization campaign from. You can use them on multiple pages. Also, you can drop multiple instances of the IS Personalization Block component onto a single page. Only add the IS Data Capture component one time to a page. You can include it in the page header or footer section. A green box in some components indicates what the component does. These green boxes only display in Experience Builder and aren’t visible to your end user.
4. To display the component’s configuration panel, click the IS Personalization Block component. In the Content Zone text box, enter the name of the content zone used in the Marketing Cloud Personalization selector.
5. Set the Content Zone property for every personalization component. The Content Zone is an ID attribute of the virtual placeholder DIV tag and only includes latin characters in lower case, digits, underscores, or hyphens.
6. Preview and then publish your Experience Cloud site.

Configure the Marketing Cloud Personalization Sitemap

1. Create a standard Marketing Cloud Personalization sitemap.
2. Add content zones for all personalization components used on your Experience Cloud Website in the Marketing Cloud Personalization sitemap. Enter a name for the Content Zone and this pattern for the selector: where {CONTENT_ZONE_PROPERTY} is the value of the Content Zone property of the corresponding Personalization Component: #{CONTENT_ZONE_PROPERTY}. For example, if you set the Content Zone property of a Personalization component to product-recs, set the Content Zone selector in the Marketing Cloud Personalization sitemap to #product-recs.
3. Wrap the standard initialization code of the sitemap with an event listener from the Data Collection Component, and then add supporting methods.
   

   Note These code snippets are examples. Customer-specific implementations require additional adjustments.

   For example, replace this code:

   Evergage.initSitemap(config);

   With this code:

     var currentUrl = window.location.href;
     var isSitemapInitialized = false;
     document.addEventListener('lwc_onuserdataready', (e) => {
          if(isSitemapInitialized) return;
         
          isSitemapInitialized = true;
         
          interactionStudioExperienceCloudHelpers.catchBuilderContext();
    
          interactionStudioExperienceCloudHelpers.userData = e && e.detail && e.detail.userData;
    
          Evergage.initSitemap(config);
    
          setInterval(() => {
              if(currentUrl !== window.location.href){
                  currentUrl = window.location.href;
                  Evergage.reinit();
              }
          }, 1000);
      });
   

4. To capture known user data, add a global onActionEvent to your sitemap.

   onActionEvent: (event) => {
      if(userData){
          event.user = event.user || {};
          event.user.attributes = event.user.attributes || {};
          event.user.attributes.userName = ((userData?.fields?.FirstName?.value || '') + ' ' + (userData?.fields?.LastName?.value || '')).trim();
          event.user.attributes.experienceCloudUserId = userData?.id;
          event.user.attributes.emailAddress = userData?.fields?.Email?.value;
          event.user.attributes.companyName = userData?.fields?.CompanyName?.value;
      }
      return event;
   }
   

5. Review this example sitemap in GitHub.

Modify Marketing Cloud Personalization Web Templates

1. Modify only those web templates that require real content zone elements or that replace original content of the website, for example Banner with Call-To-Action or Einstein Product Recommendations. Web templates that automatically append content to the body of the page like Exit Intent Pop-Up with Email Capture don’t require any modifications.
2. Open a web template, and proceed with the Client Side tab.
3. Locate this line of code:

   Evergage.cashDom(element).html(html);

4. Replace it with this code:

   document.dispatchEvent(
      new CustomEvent('interactionstudio_oncontentforcomponentready',
      {
          detail: {
              selector: contentZoneSelector,
              html: html
          },
      }
   ));
   

5. Save and publish this web template.

Related Content

Review earlier steps in this solution. Run-time Workflow Design Considerations