Integrating AdButler JavaScript Tags

AdButler’s JavaScript tags are the recommended way to serve ads on your website. They provide built-in tracking, viewability, and support for advanced targeting options like keywords, data keys, and UserDB audience targeting.

When using AdButler's JavaScript tags, most of the integration is handled automatically, though you will have to pass in optional targeting parameters into various parts of our JavaScript tag.

Basic JavaScript Tag (Async JS)

A typical AdButler JavaScript tag looks like this:

<!-- Default Zone [async] -->
<script type="text/javascript">
if (!window.AdButler){
  (function(){
    var s = document.createElement("script");
    s.async = true;
    s.type = "text/javascript";
    s.src = 'https://servedbyadbutler.com/app.js';
    var n = document.getElementsByTagName("script")[0];
    n.parentNode.insertBefore(s, n);
  }());
}
</script>
<script type="text/javascript">
var AdButler = AdButler || {};
AdButler.ads = AdButler.ads || [];
var abkw = window.abkw || '';
var plc880057 = window.plc880057 || 0;
document.write('<'+'div id="placement_880057_'+plc880057+'"></'+'div>');
AdButler.ads.push({
  handler: function(opt){
    AdButler.register(188576, 880057, [300,250], 'placement_880057_'+opt.place, opt);
  },
  opt: {
    place: plc880057++,
    keywords: abkw,
    domain: 'servedbyadbutler.com',
    click: 'CLICK_MACRO_PLACEHOLDER'
  }
});
</script>

Placing JavaScript Tags on Your Page

To ensure your ads render correctly, place each AdButler JavaScript tag directly where you want the ad to appear on your web page.

Best Practices:

Add the tag inside the of your HTML, within the exact

<

div> or section reserved for the ad placement.

Avoid wrapping the tag in additional containers unless needed for layout.

For responsive designs, place the tag inside a container

<

div> with a defined width and height to maintain layout stability.

<div class="ad-slot">
  <!-- AdButler Zone Tag -->
  <script type="text/javascript">
  // Your AdButler JavaScript tag here
  </script>
</div>
Tip: Place tags as close as possible to where the ad should appear to avoid layout shifts during page load.

Adding Keywords

To target specific campaigns or ad items, pass keywords into your zone tag.

<script type="text/javascript">
var abkw = 'sports,football';
</script>

Add this line before your AdButler tag.

Only campaigns or ad items that match sports or football will be eligible to serve.

Tip: Separate multiple keywords with commas.

Adding Data Keys

Data Keys let you pass structured data, such as user type or product category, for advanced targeting. Use the dataKeys property inside the opt object.

Example:

<script type="text/javascript">
var AdButler = AdButler || {};
AdButler.ads = AdButler.ads || [];
var plc880057 = window.plc880057 || 0;
document.write('<'+'div id="placement_880057_'+plc880057+'"></'+'div>');
AdButler.ads.push({
  handler: function(opt){
    AdButler.register(188576, 880057, [300,250], 'placement_880057_'+opt.place, opt);
  },
  opt: {
    place: plc880057++,
    dataKeys: { "userType": "premium", "region": "west" },
    domain: 'servedbyadbutler.com',
    click: 'CLICK_MACRO_PLACEHOLDER'
  }
});
</script>
Note: Data Keys must match the Data Key Targeting rules configured for your campaigns or ad items.

Recommended Reading: Data Keys Guide


Can't find what you're looking for?

Send us an email

hello@adbutler.com

Visit the blog

For more ad serving tips, industry news and AdButler insights.