I want to show ads in a CMS list, meeting a few criteria:
One (1) ad slot inside of my list, on the first page.
I want to able to run more than one ad campaign at once, switching randomly between the different ads that are inserted in the list. So that the advertisers get a roughly equal share of the inventory (views).
I need to be able to measure the views (Google Analytics is set up).
This… without messing with my CMS Filter, Load, Select, Custom select… and so on.
I’m picturing a separate CMS-collection with the ads, but I can’t figure out how to get them inside of another list in a fixed place.
The use case:
I’m building a directory – a list where corporate events (chapter 11 filings) are served from a CMS collection.
Thank you! This is the code that should handle this. You can add it to the </body>
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
async (listInstances) => {
console.log('cmsload Successfully loaded!');
const [listInstance] = listInstances;
const adsList = document.getElementById('ads');
// Function to get a random child element
function getRandomChildElement(parentElement) {
const children = parentElement.children; // Get all child elements
const randomIndex = Math.floor(Math.random() * children.length); // Select a random index
return children[randomIndex]; // Return the random child element
}
const randomAd = getRandomChildElement(adsList);
// Clone the random ad element
const clonedAd = randomAd.cloneNode(true);
// Prepare the static item to add
const staticItem = {
itemElement: clonedAd, // Cloned ad element
targetIndex: 5, // Define the place to add the ad
interactive: true, // Set to true if the item should be interactive
repeat: 0, // No repeat in this case
};
await listInstance.addStaticItems([staticItem]);
},
]);
</script>
You would only need to add the ads collection to the page and assign the ads ID to the collection list element.
I added some comments to the code to explain what it does, but if you need any help please reach out!
HI @Support-Luis , many thanks!!
I tried it quickly, and it seems to work perfectly. I’m going to toy around with it – I’ll get back to you.
Thank you SO much,
Jacob
I have two questions regarding the script you provided. To refresh your mind, it inserts an ad in a collection list.
Firstly – regarding load times: Although it works nicely, the ad takes a second or so to load. It loads after the list in which the ad is inserted, and the effect is that once it loads it knocks down the other items in the list. It is not a big deal, but I’d obviously prefer if it would load faster. Any thoughts?
Secondly – as of now, the ad disappears whenever you start entering information in the search filters. Is there a way to “pin” the ad to the top, regardless of what is being entered in the filters?
For the second issue, currently, there is a bug for the static element that requires the element to be interactive, which is what makes the filters affect the element.
You can set the interactive parameter to false to prevent the item being affected by the filtering, as shown below
const staticItem = {
itemElement: clonedAd, // Cloned ad element
targetIndex: 0, // Define the place to add the ad
interactive: false, // Set to true if the item should be interactive
repeat: 0, // No repeat in this case
};
This bug shows up on the Static to Collection List Attribute so please verify that the last element is correctly shown.
This issue will be addressed in V2, which we are close to release
