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.
- Republish your tracking code.
- Create dynamic block content that includes content that will require JavaScript for proper display.
- Add the dynamic content to a page.
- 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.
- In the page source, add the listener to the
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:
| dynamicContentLength | Count of the dynamic contents on the given page (number type) |
|---|---|
| dynamicContentEventData | All 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 });