Optimize

Basic Install

There are two steps to installing Optimize tags on your website.

Step 1: Embedding the JavaScript Code

For your non-AMP pages where you intend to display ads, you'll need to add the JavaScript code that allows the ad to load and display. You can find the tags specific to your website here: https://sell.buysellads.com/zones/optimize/ad-tags.

This script should get placed right before the closing </head> tag of your HTML pages. Ensure it's added to all non-AMP pages where you plan to show ads. Even if there are multiple ads on a page, you only need to insert this script once.

<script type="text/javascript">
	(function(){
		var bsa_optimize=document.createElement('script');
		bsa_optimize.type='text/javascript';
		bsa_optimize.async=true;
		bsa_optimize.src='https://cdn4.buysellads.net/pub/[YOUR_ACCOUNT_LABEL].js?'+(new Date()-new Date()%600000);
		(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa_optimize);
	})();
</script>

Step 2: Placing the Ad Tag and CSS

You can include the CSS specific to each ad zone in your own CSS file. Below is just a sample, please grab the specific styles for your zone(s) here: https://sell.buysellads.com/zones/optimize/ad-tags.

<style>
	@media only screen and (min-width: 0px) and (min-height: 0px) {
		div[id^="bsa-zone_[YOUR_ZONE_ID]"] {
			min-width: 0px;
			min-height: 0px;
		}
	}
	@media only screen and (min-width: 640px) and (min-height: 0px) {
		div[id^="bsa-zone_[YOUR_ZONE_ID]"] {
			min-width: 728px;
			min-height: 90px;
		}
	}
</style>

Include the HTML tag for each zone where you would like it to appear on your website.

<div id="bsa-zone_[YOUR_ZONE_ID]"></div>

Single-Page Applications

For React, Vue, Svelte, or other SPA frameworks, the standard install won't refresh ads on route changes. You need to call optimize.pushAll() when the URL updates.

The integration pattern is the same as the Monetization Framework:

1. Load the script once at app level
2. Call optimize.pushAll() on route changes

// On route change
window.optimize.queue.push(() => {
  window.optimize.pushAll()
})

See Framework Integration for lifecycle hooks by framework.