- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
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.
4 Tealium iQ Example Extension
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
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:
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") |
Here are some examples of what you would need:
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" |
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" |
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.
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"], } } } }
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>
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]) } }
Copyright All Rights Reserved © 2008-2023