Google Publisher Tag : End-to-End Example and what do your developers need to do?

[#1]

Introduction

Understanding what is required to be implemented by your developers in order to use the Google Publisher Tag in Tealium iQ can be daunting but it needn't be - it is easy once you have read this guide.

Contents

1 Ad Slot Requirements

   1.1 Requirements

   1.2 Examples

2. Page Requirements

   2.1 Divs for Ad Slot

   2.2 Data Layer

3 Example Page Code

4 Tealium iQ Example Extension

1. Ad Slot Requirements

1.1 Requirements

First, you need to know what ad slots are required on any given page and what they need to look like. They key pieces of information you need to know are:

Hint! It is useful to read Google's example Tag Sample to understand the Google code

Required per Ad Slot

What?	What is it?	Notes	Example	Google Equivalent Code
Div ID	What is the <div> ID that we will be injecting the ad into.	It needs to be unique per page but it doesn’t need to be unique across the whole site	"gpt_mpu"	googletag.defineSlot("/1234/travel/asia/food", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
Ad Sizes	Array of ad sizes it will support	What ads sizes will it support?	[468, 60], [728, 90], [300, 250]	googletag.defineSlot("/1234/travel/asia/food", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
Targeted Ad Unit (slot ID)	This is the "travel/asia/food" within "/1234/travel/asia/food"	This can be populated by various vars in the data layer. For example: page_section = "travel" page_section_2 = "asia" page_section_3 = "food" Note: the network code can be set in Tealium	page_section = "travel" page_section_2 = "asia" page_section_3 = "food"	googletag.defineSlot("/1234/travel/asia/food", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
Key Value Targeting	This adds additional targeting capabilities per ad slot	You can have as many of these as Google will allow	gender = "male" pos = "top"	.setTargeting("gender", "male") .setTargeting("pos", "top")

In addition, if you have any Key Value Targeting requirements per page (i.e. targeting criteria relevant to every ad call on the page, e.g. "author" or "topic") we also need to know these:

Required per Page

What?	What is it?	Notes	Example	Google Equivalent Code
Key Value Targeting (page-level)	Allows you to add targeting criteria across all ad slots on a page	You can have as many of these as Google will allow	topic = "basketball"	setTargeting("topic","basketball")

1.2 Examples

Here are some examples of what you would need:

Required per Ad Slot

What is this?	Div ID	Ad Sizes	Targeted Ad Unit (Slot ID)	Key Value Targeting
Leaderboard slot	"gpt_leaderboard"	[728, 90], [468, 60]	page_section = "travel" page_section_2 = "asia" page_section_3 = "food"	pos = "top"
MPU slot	"gpt_mpu"	[336x268], [300,250]	page_section = "travel" page_section_2 = "asia" page_section_3 = "food"	pos = "content"
MPU slot 2	"gpt_mpu_2"	[336x268], [300,250]	page_section = "travel" page_section_2 = "asia" page_section_3 = "food"	pos = "footer"
Skyscraper slot	"gpt_skyscraper"	[160x600]	page_section = "travel" page_section_2 = "asia" page_section_3 = "food"	pos = "out_of_page"

Required per Page

 

What?	What is it?	Notes	Example
Key Value Targeting (page-level)	Allows you to add targeting criteria across all ad slots on a page	You can have as many of these as Google will allow	topic = "basketball"

 

2. Page Requirements

2.1 Divs for Ad Slot

Each page will require a <div> to be inserted into the page where each ad needs to be injected into. Each <div> needs an ID which matches the ad which needs to be injected:

 

These need to be generated server-side to ensure they are available immediately for Tealium to inject ads into.

2.2 Data Layer

The data layer needs to contain the information about the ad slots as detailed above. This information must be made available in the Universal Data Object (UDO) called utag_data.

Normally, Tealium does not recommend nesting variables within the UDO but nesting will be much easier for generating ad calls.

utag_data = {
        ...
        "page_section_name": "travel", // an example variable for Slot ID, e.g. "/travel/asia/food"
        "page_section_name_2": "asia", // an example variable for Slot ID, e.g. "/travel/asia/food"
        "page_section_name_3": "food", // an example variable for Slot ID, e.g. "/travel/asia/food"
        "device_type": "desktop", // Page-level single key-value pair targeting (e.g. .setTargeting("device_type", "desktop"))
        "page_topics": ["eastern","stir fry"], // Page-level multiple values for the same key (e.g. .setTargeting("topics". ["eastern", "stir-fry"]))

        ...
        "ad_slots": {
                "gpt_leaderboard": { // div name 1
                        "name": "gpt_leaderboard", // div name 2
                        "sizes": [[728, 90],[468, 60]],
                        "targeting": {                                
                                "pos": ["top"]
                        }
                },
                "gpt_mpu": { // div name 2
                        "name": "gpt_mpu", // div name 2
                        "sizes": [[300, 250],[336, 280]],
                        "targeting": {                                
                                "pos": ["right"],
                                "mobile": ["false"],
                        }
                } 
        }
}

 

3. Example Page Code

An example page might look like this:

<head>
...
<!-- Loading utag.sync synchronously -->
<script type="text/javascript" src="//tags.tiqcdn.com/utag/account_name/profile_name/environment/utag.sync.js"></script>
...
</head>
<body>

<!-- Tealium Universal Data Object -->
<script type="text/javascript">
utag_data = {
        ...
        "page_section_name": "travel", 
        "page_section_name_2": "asia", 
        "page_section_name_3": "food", 
        "device_type": "desktop", 
        "page_topics": ["eastern","stir fry"], 

        ...
        "ad_slots": {
                "gpt_leaderboard": { // div name 1
                        "name": "gpt_leaderboard", // div name 2
                        "sizes": [[728, 90],[468, 60]],
                        "targeting": {                                
                                "pos": ["top"]
                        }
                },
                "gpt_mpu": { // div name 2
                        "name": "gpt_mpu", // div name 2
                        "sizes": [[300, 250],[336, 280]],
                        "targeting": {                                
                                "pos": ["right"],
                                "mobile": ["false"],
                        }
                } 
        }
}
</script>

<!-- Tealium utag.js Async call -->
<script type="text/javascript">
(function(a,b,c,d)
{	
	a='//tags.tiqcdn.com/utag/account_name/profile_name/environment/utag.js'; 
	b=document;c='script';
	d=b.createElement(c);d.src=a;
	d.type='text/java'+c;
	d.async=true; 
	a=b.getElementsByTagName(c)[0];
	a.parentNode.insertBefore(d,a); 
})();
</script>     
...
<!-- Ad Slot 1 -->
<div id="gpt_leaderboard"></div>
...
<!-- Ad Slot 2 -->
<div id="gpt_mpu"></div>
... 
</body>

4. Tealium iQ Example Extension

Here is an example Javascript extension which can be scoped to the GPT tag to generate the relevant ad calls. This will work with the above example:

// ### CONFIGURATION ###
b.gpt_network_code = "YOUR NETWORK CODE"; // replace with your network code

// ### DO NOT EDIT BELOW THIS LINE ###
b.gpt_slot_id = "/" + b.gpt_network_code + "/" + b.page_section_name + "/" + b.page_section_name_2 + "/" + b.page_section_name_3;
u.gptSlots = [];
u.setTargeting = {};

// loop through and generate ad slots
if (utag.ut.typeOf(b.ad_slots) === "object") {

	for (varName in b.ad_slots) {
		u.gptSlots.push([b.gpt_slot_id, b.ad_slots[varName].sizes, b.ad_slots[varName].name,b.ad_slots[varName].targeting])
	}
}