Back

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:

 

Screen Shot 2016-01-14 at 15.51.38.png 

 

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])
	}
}