Get wrapper, install on a webpage
At this moment you’ve successfully created the whole site structure in the HeadBidder UI. Now it’s time to set up code on your live site. To do so a Publisher should have access to the page source: <head>..</head> part, where the main script is placed, and <body> part, where visible part of a web page is created and where banners should appear physically.
Html code is slightly different for sites with and without GAM integration.
There are different DIVs for 'sync' and 'async' scripts. If a Publisher has changed sync/async option in a Site parameters he must renew HTML code on web pages.
In order to get access to site code snippets, a Publisher should click the “Get Code” site menu item on the man screen on HBM UI.
A stand-alone site, no integration with GAM.
1. This is the script for <head> part of the web site.
2. This is code (one or several DIVs) that represent each banner space on a web page and must be added into <body> part.
3. Programming-savvy Publisher may use this instruction to manually refresh a particular ad unit. Use case and scenario is up to Publishers’ decision.
4. This button is optional. By default, the site script is updated immediately after the setting is applied and populated over CDN within 15 minutes. A Publisher may use this button to manually refresh the site script if nothing happens for more than 15 minutes. Otherwise don’t hesitate to reach out to support@headbidder.net.
A site integrated with Google Ad Manager.
A Publisher should remove old GPT tags from the web page before implementing HBM tags. Otherwise, there will be two competing GPT calls that negatively affect ad delivery.
On the first screen, we can find the script for <head> part of the web site (see #1).
On the next screen we see:
1. This is code (one or several DIVs) that represent each banner space on a web page and must be added into <body> part.
2. Programming-savvy Publisher may use this instruction to manually refresh a particular ad unit. Use case and scenario is up to Publishers’ decision.
3. Note, div ids are important, they should exactly match ids that have been used in the <head< script.
4. This button is optional. By default, the site script is updated immediately after the setting is applied and populated over CDN within 15 minutes. A Publisher may use this button to manually refresh the site script if nothing happens for more than 15 minutes. Otherwise don’t hesitate to reach out to support@headbidder.net.
A site with Infinite Scroll and integrated with Google Ad Manager.
This is a quite special type of web page that shows the same ad unit many times per user. Technically, each ad unit is refreshed after a user scrolled for example 500 pixels. For implementing such, Publisher should be programming-savvy or use third-party scripts. HBM provides such sites with basic elements that allow to show ads under the scenario that Publisher wants.
The first screen is the same as for GAM-integrated site, we see the script for <head> part of the web site (see #1).
On the second screen, we may find a Method Description (#1), Method Usage example (#2), and DIVs (#3) with their setup instructions.
The example represents the case when an ad unit is refreshed each time when a button clicked (the event or trigger). Publishers may use own events or triggers to refresh an ad unit – ex. “call refresh method every 750 pixels of users’ scroll”.
<button onclick="generate();">Generate</button>
<script type="text/javascript">
function generate() {
var newNode = document.createElement('div');
newNode.id = 'div1';
document.body.appendChild(newNode);
hbManager.dynamic('div1', '123'); // HBM Ad Unit Zone ID is 123
}
</script>Below is an example from a live page that shows how the HBM code must be installed.
1. A web page with two banners, two physical ad units.
2. Html source code of the web page. This is <head> part of the page source.
3. HBM Head scrip is between <head> and </head> tags.
4. This is <body> part of the page. We see two divs that allows the banner to appear visually on the page.