July 27, 2020

Header Bidding for the WordPress. Use Case.

WordPress is the most used site and blog creation tool. Therefore, a lot of publishers require to install header bidding wrapper in order to monetize their property. Within the following several screen-shots and a brief explanation, we’ll try to give a piece of advice on how to install header bidding wrapper into a WordPress site. This use case is based on the HeadBidder tool and we assume that a Publisher has already created a “site” in the Headbidders’ UI. However, all steps are well described in the Headbidders’ UI documentation. Let’s go.

1. Start from choosing Ad spots

Step one. We have a site with two ad spots – first in the top/header, second in the right sidebar.

ad spots on website
The site with two ad spots.

2. “Template” and “Theme”

Step two. As the site owner, you have full access to your site code via FTP (SFTP). Usually, site design is made using “templates” or “themes”. Try to find a proper folder with your active template, something like “/www/wp-content/themes/theme_name”:

find proper files to edit
Your site in the FTP-access tool.

You’ll need to edit files “header” and “sidebar” (one of sidebars).

3. Adding GDPR and CCPA

Step three. GDPR, CCPA, etc. user privacy laws are on the rise. Assume you use the Quantcast Privacy tool. Add the site into UI and get the Consent Tool HTML code. You’ll need to install it into the site header.

Add consent
Add GDPR consent tool.

4. Getting the code

Step four. You’ll need a code from HeadBidder UI. Go to Site/Get Code and prepare head scrip and ad spot DIVs.

Code snippets from the Headbidder UI
Code snippets from the Headbidder UI.

5. Quantcast CMP script

Step five. Into the head part of the site, before the tag, please insert the Quantcast CMP script and then HeadBidder Head script.

Head part of the site
Head part of the site.

6. Header DIV on WordPress site

Step six. Then, in the header file, please try to find out the place where the top banner appears. Programmers usually use DIV names that clearly define what this DIV does.
A tip. Often you’ll need to remove a part of HTML code and replace it with a new one. Try to be careful, don’t delete but just comment useless part of code with comments:
Comment starts with – “<!–” and finishes with – “–>”
You’ll be able to experiment with your HTML using such an approach.

Add top banner
Add top banner.

7. Sidebar DIV

Step seven. Do the same with the sidebar. Note, the head script is added only once per page in the header. In the body part, you’ll add DIVs only.

Sidebar ad goes here.

8. Header Bidding on WordPress site is done

Step eight – finally, it works!

header bidding based banners on place
We can see header bidding based banners.
Further reads
Google Ad Manager. Cross-platform analytics available
Getting know how site earn with Google Ad Manager. Cross-platform analytics available on one screen in HeadBidder UI. With…
Xandr stops Prebid Server, HeadBidder runs it
Xandr stops Prebid Server. So, some time ago Xandr decided to close access to it’s hosted and free of…
What tech solution to use for a network of sites
Header bidding, waterfall tech or both. When someone starts building or operating an adnetwork of websites the question…
Google shifts deadline for Cookieless world
Google shifts deadline for Cookieless world. The deadline for opting out of third-party cookies has been postponed by Google again.