By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

 
Skip to Content

Sample JavaScript for Personalization

Some Personalization dynamic content may contain more advanced elements, like image gallery slideshows, which could require JavaScript to display correctly on your website. Personalization has two different custom JavaScript events to help achieve the proper display of these advanced elements.

  1. Republish your tracking code.
  2. Create dynamic block content that includes content that will require JavaScript for proper display.
  3. Add the dynamic content to a page.
  4. Add the JavaScript listener to the page.
    • In the page source, add the listener to the <headcode></headcode> or <footcode></footcode> .
    • You may also add these JavaScript event listeners to a JavaScript file that is included on the page.

Sample JavaScript Listener for Individual Content Variation EventsLink to this section

A custom JavaScript event is emitted after each dynamic content variation is determined.

This event includes the following:

The ID of the given dynamic content (string type)

Is it the default variation? (Boolean type)

  • true - is the default
  • false - is not the default

Was it is a success or error call to the personalization service? (String type)

  • "success" - was successful
  • "error" - was not successful

The id of the given variation (string type)

 How To Listen to this Event

document.addEventListener('modernCampusCmsPersonalizationVariationComplete', (e) => {
      // Example console.log to see the event data
     console.log(e.detail);
});

Sample JavaScript Listener for All Content Variation EventsLink to this section

A custom JavaScript event is emitted after all dynamic content variations are determined.

This event includes the following:

dynamicContentLengthCount of the dynamic contents on the given page (number type)
dynamicContentEventDataAll the variation event data as it is output in the single variation event (array type)

How To Listen to this Event

document.addEventListener('modernCampusCmsPersonalizationComplete', (e) => {
      // Example console.log to see the event data
     console.log(e.detail);
}, { once: true });

Image Gallery Slideshow

To use an image gallery slideshow (flexslider) inside dynamic content, add the following JavaScript.

document.addEventListener('modernCampusCmsPersonalizationComplete', (e) => {
      // Make sure Flexslider is displayed correctly by calling the resize method.
     $('.flexslider').resize();
}, { once: true });