Introduction

Marketing Cloud Personalization (formerly known as Interaction Studio) is a powerful tool that enables businesses to deliver personalised experiences to their website visitors. It allows you to track user interactions, segment users, and create tailored experiences for each user based on their preferences and behavior. In this blog post, we will walk you through the basic process of onboarding the Sitemap for Marketing Cloud Personalization with working code examples, using our previous conversation as a reference.

Step 1: Set up the Sitemap Configuration Object

To begin, you'll need to create a sitemap configuration object. This object will contain all the information required to interact with Interaction Studio, such as global configurations, page-specific settings, and event listeners.

Here's an example of a basic sitemap configuration object:

Evergage.init({
  cookieDomain: "example.com",
}).then(() => {
  const config = {
    global: {
        onActionEvent: (actionEvent) => {
            // Your global event callback logic here
        },
        contentZones: [
           // Your global content zones here
        ],
        listeners: [
            // Your global event listeners here
        ]
    },
    pageTypeDefault: {
      name: "default",
    },
    pageTypes: [
        {
            name: "index",
            action: "Viewed - Index",
            isMatch: () => /^\/$/.test(window.location.pathname),
            listeners: [
                // Your page-specific event listeners for the index page here
            ],
        },
        // Other page configurations here
    ],
};

  Evergage.initSitemap(config);
});

Step 2: Configure Event Listeners

Event listeners allow you to track user interactions on your website. In the sitemap configuration object, you can define global listeners that will be active across your entire website or page-specific listeners for individual pages.

Here's an example of adding an event listener for a button click:

listeners: [
    Evergage.listener("click", ".cta-button", () => {
        Evergage.sendEvent({action: "Clicked - Call to Action Button"});
    }),
],

Step 3: Set up Page Matchers

Page matchers help you determine which page configuration should be used based on the current URL. Use the isMatch property in the page configuration object to define a function that returns true if the current URL matches the page you want to target.

Here's an example of setting up a page matcher for a specific page:

pageTypes: [
        {
            name: "index",
            action: "Viewed - Index",
            isMatch: () => /^\/$/.test(window.location.pathname),
            listeners: [
                // Your page-specific event listeners for the index page here
            ],
        },
        {
            name: "about",
            action: "Viewed - About",
            isMatch: () => /\/about/.test(window.location.href),
            listeners: [
                // Your page-specific event listeners for the about page here
            ],
        },
        // Other page configurations here
    ],

Step 4: Send Events to Interaction Studio

When you want to send an event to Interaction Studio, use the Evergage.sendEvent() function. This function takes an object with the event details, such as the action name and any additional attributes.

Here's an example of sending an event to Interaction Studio:

Evergage.sendEvent({action: "Clicked - Call to Action Button"});

Step 5: Content Zones

Content zones are areas on your website where you want to deliver personalised content. To define content zones, add them to the contentZones array in the global section of your sitemap configuration object. Each content zone should have a name and a selector that corresponds to the HTML element where the content will be displayed.

Here's an example of defining a content zone:

contentZones: [
    {name: "top_bar", selector: ".navigation"},
    {name: "main_content", selector: ".main-content"},
],

After defining content zones, you can use them in your personalisation campaigns to target specific areas of your website for delivering personalised content.

Conclusion

In this blog post, we've covered the basic process of onboarding Marketing Cloud Personalisation. We've discussed how to set up the sitemap configuration object, configure event listeners, set up page matchers, send events to Personalisation, and define content zones for personalised content delivery.

By following these steps, you can successfully implement Interaction Studio on your website and start delivering personalised experiences to your visitors. As you become more familiar with the platform, you can further customise and enhance your personalisation campaigns to create truly unique and engaging experiences for your users.

Remember, personalisation is an ongoing process, and you should continually analyse and optimise your campaigns to achieve the best results. With Marketing Cloud Personalization, you have a powerful toolset at your disposal to create highly tailored experiences for your website visitors, ultimately driving better engagement, conversions, and customer satisfaction.

Get in touch

If you need help with implementing Marketing Cloud Personalization, our team of experts is here to assist you. Whether you're just getting started or looking to optimise your existing personalisation campaigns, we're happy to provide guidance and support tailored to your specific needs.

To contact us, simply fill out the form on our website, and one of our team members will get back to you as soon as possible. In your message, please provide details about your implementation requirements, challenges, or any specific questions you may have.

We look forward to helping you make the most of Personalisation inside of Marketing Cloud Personalization, and to driving exceptional results for your business.