Sample JavaScript for Instinct™
Some Instinct™ dynamic content may contain more advanced elements, like image gallery slideshows, which could require JavaScript to display correctly on your website. Instinct™: 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 });
