Rotate Content Modifications on Page View?

[jeff_snyder]

Hello, We use the content modification extension to display a banner on our website. We would like to randomly select one of two banners with each page view. Split segmentation seems to only allow us to rotate by session. Any advice on how this can be accomplished? Thank you very much! Jeff

[steve_thurner]

Hi Jeff, You could add a javascript extension and update the split segment cookie value by hand on each page view, or just setup a variable at the window level to contain the next banner value to show. In the case to of the variable you would want it to update early in the page load process so I would suggest scoping that extension to preloader.

[dan_george · Accepted solution]

Hi Jeff, Just to add to Steve...the Split Segmentation extension is mainly to A/B test the user for the duration of the visit or session. We are setting a cookie that is set upon initial site landing and never updated until it's expiry is met. That extension isn't really necessary for a per page A/B test since you want to randomly select a banner of page view. I would just create a Set Data Values extension that sets a variable like "randomNumber" to "JS Code" of "Math.floor(Math.random()*100);". This will run on each page load and randomly create a number between 1-100. Then within the Content Modification extension for banner 1 you can add a condition that checks if randomNumber is greater than 0 and less than or equal to 50. Then within the Content Modification extension for banner 2 you can add a condition that checks if randomNumber is greater than to 50 and less then 100. This will allow a true random selection based upon each page landing. Let me know if this would be useful or if there are any questions.

[jeff_snyder]

This is a good approach, but for some reason the random number wasn't generated before the condition was checked, so no banner was shown. To solve this - we kept the random js variable set by the extension and mapped it to a custom container. In the custom container, the code looks like this: if (data.random > 5) html = 'banner 1 html'; else html = 'banner 2 html'; var div = document.createElement('div'); div.innerHTML = html; var child = document.getElementById('bannerdiv'); var parent = child.parentNode; parent.insertBefore(div,child); Thanks for all your help Dan and Steve, and a shout-out to Stuart Roskelley who implemented this for us.