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.
1
<script async src="https://cdn.contextcue.com/adsbycontextcue.js"></script>
Copied!
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.
1
<ins class="adsbycontextcue" data-cc-site="ab1cdefg-2h3i-4567-jk89-0l1m23456nop" data-cc-slot="vsrKxU4rP" style="width: 728px; height: 90px;"></ins>
Copied!
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 [email protected] 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.
1
setInterval(function () {
2
// This event triggers a scan for new ad slots on the page, as well as
3
// refreshing existing ad slots
4
window.dispatchEvent(new CustomEvent('contextcue:fetch', {
5
detail: {
6
refreshExisting: true
7
}
8
}));
9
}, 5*60*1000); // Every 5 minutes
Copied!

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
1
window.addEventListener('contextcue:loaded', (data) => {
2
// Note: This will be called any time ads are loaded
3
const { unfilled } = data;
4
for(var slot in unfilled) {
5
const el = document.querySelector(slot.selector);
6
el.innerHTML = '<div>Your nice fallback HTML here</div>';
7
// You can do whatever else you want here
8
// Also make sure to display the slot
9
el.style.display = 'block';
10
}
11
});
Copied!
1
window.addEventListener('contextcue:loaded', function(data) {
2
// Note: This will be called any time ads are loaded
3
for(var slot in data.unfilled) {
4
const el = document.querySelector(slot.selector);
5
el.innerHTML = '<div>Your nice fallback HTML here</div>';
6
// You can do whatever else you want here
7
// Also make sure to display the slot
8
el.style.display = 'block';
9
}
10
});
Copied!
Last modified 2yr ago