Website ads

Once you have your sites and ad units created, follow these steps to implement ContextCue ads on your website or blog.

How to implement ContextCue ads on your website

There are two main parts to integrating ContextCue ads on a website. The first, is the JavaScript that is used to fetch the ads. You'll want to add the following code snippet to your site.

<script async src="https://cdn.contextcue.com/adsbycontextcue.js"></script>

Once you've added the script tag, you'll also need to add the html for individual ad slots. This HTML can easily be generated for you in your ContextCue account under Publisher > Site > Ad Unit > Copy Code > Size of your choosing. It should look something the following.

<ins class="adsbycontextcue" data-cc-site="ab1cdefg-2h3i-4567-jk89-0l1m23456nop" data-cc-slot="vsrKxU4rP" style="width: 728px; height: 90px;"></ins>

You'll want to add this HTML code to your site where you want an ethical ad to appear.

If you’re using a different hosting site that isn’t listed here or you’re having trouble getting ContextCue ads to show up on your site, send us a message at support@contextcue.com and we can help.

Advanced implementation

Ad refresh

If your site is a single page application, or an application that users spend a lot of time on a single page, ex. an online game, you might want to periodically refresh the ads. You can implement something like the following to refresh the ads every 2 minutes.

setInterval(function () {
// This event triggers a scan for new ad slots on the page, as well as
// refreshing existing ad slots
window.dispatchEvent(new CustomEvent('contextcue:fetch', {
detail: {
refreshExisting: true
}
}));
}, 5*60*1000); // Every 5 minutes

Ad fallbacks

Sometimes ContextCue doesn't have any relevant ads to display to your visitor. When this happens, we hide the ad slot. If this isn't the behavior you would like, you can override this default behavior with your own. For example, if you would like to show some html code in the slot when an ad is not available, you could add some JavaScript like this.

ES6
ES5
ES6
window.addEventListener('contextcue:loaded', (data) => {
// Note: This will be called any time ads are loaded
const { unfilled } = data;
for(var slot in unfilled) {
const el = document.querySelector(slot.selector);
el.innerHTML = '<div>Your nice fallback HTML here</div>';
// You can do whatever else you want here
// Also make sure to display the slot
el.style.display = 'block';
}
});
ES5
window.addEventListener('contextcue:loaded', function(data) {
// Note: This will be called any time ads are loaded
for(var slot in data.unfilled) {
const el = document.querySelector(slot.selector);
el.innerHTML = '<div>Your nice fallback HTML here</div>';
// You can do whatever else you want here
// Also make sure to display the slot
el.style.display = 'block';
}
});