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])
}
}
... View more