CreativeTech Wiki (internal)

Explore

Recipes

The GeoConditions Recipe

Introduction

⁠

The GeoConditions recipe allows an ad producer to add conditional logic to their ads based on the region “group” from which the request was made.

Links

⁠

🔗

JSON Editor⁠

⁠

🔗

GAM Example⁠

⁠

Steps for Adding Geo-Based Conditions

How it works

On each

nytimes.com⁠

resource, a new header value containing region “group” info has been added. We use this group information to process a JSON payload that replaces HTML targets with new info.

Steps

Copy/Paste the CUSTOM JS code below into the GAM CustomJS field.

Modify the JSON payload by entering your target (i.e. .summary) and the HTML you’d like to insert into this target. You may add more than one target per group:

"group1": [{".target-1": "Target 1 text."},{".target-2": "Target 2 text."},{".target-3": "Target 3 text."}]

WARNING: The software will replace ALL of your chosen targets. If you need to select only one of your targets, you will need to target your elements finitely.

Adding The Sugar

Because you’re replacing the contents of an element, if you don’t add the “sugar” you will see an annoying pop-in your replaced text. To deal with that, follow these steps:

Copy/Paste the CUSTOM CSS below into the GAM CustomCSS field.

Modify the SUGAR 1 entry to point to your content targets.

TIP: You can also modify the styling of your geo groups by using the SUGAR 2 method.

Recipe

CUSTOM JS

/* If not working, use this code below and re-test */

/*const loadScript = (FILE_URL, async = true, type = 'text/javascript') => {

return new Promise((resolve, reject) => {

try {

const scriptEle = document.createElement('script');

scriptEle.type = type;

scriptEle.async = async;

scriptEle.src = FILE_URL;

scriptEle.addEventListener('load', (ev) => {

resolve({status: true});

});

scriptEle.addEventListener('error', (ev) => {

reject({status: false});

});

document.body.appendChild(scriptEle);

} catch (error) {

reject(error);

}

});

};*/

const geoData = {

"default":[{".content-well .summary": "Check out your discounted rates for your first six months.(d)"}],

"group1": [{".content-well .summary": "<s>$6.25</s> $1 a week for your first six months.(1)"}],

"group2": [{".content-well .summary": "<s>A$6.25</s> A$0.50 a week for your first six months.(2)"}],

"group3": [{".content-well .summary": "<s>$6.25</s> $0.50 (Cdn) a week for your first six months.(3)"}],

"group4": [{".content-well .summary": "<s>€3</s> €0.50 a week for your first six months.(4)"}],

"group5": [{".content-well .summary": "<s>£3</s> £0.50 a week for your first six months.(5)"}],

"group6": [{".content-well .summary": "<s>$3</s> $0.50 a week for your first six months.(6)"}],

"group7": [{".content-well .summary": "<s>$3</s> $0.25 a week for your first six months.(7)"}],

"group8": [{".content-well .summary": "<s>$3</s> $0.25 a week for your first six months.(8)"}]

}

loadScript("https://static01.nytimes.com/ads/creative-tech/flex-frames/lib/geo-conditions.min.js").then(()=>{new GeoConditions(geoData)});

CUSTOM CSS

/* SUGAR 1 */

.content-well .summary {

opacity: 0;

transition: all 75ms ease-in;

max-width: unset;

}

/* SUGAR 2 */

body[data-geo="group5"] .content-well .summary {

color: red;

}

Introduction

The GeoConditions Recipe

Introduction

Meta

Links

Steps for Adding Geo-Based Conditions

How it works

Steps

WARNING: The software will replace ALL of your chosen targets. If you need to select only one of your targets, you will need to target your elements finitely.

Adding The Sugar

TIP: You can also modify the styling of your geo groups by using the SUGAR 2 method.

Recipe

CUSTOM JS

CUSTOM CSS