CreativeTech Wiki (internal)

Explore

Bespoke FlexXL Workflow

Coding

References and conventions on about bespoke FlexXL units.

Repository

Clone the repository:

https://github.com/nytimes/TBrandCreativeTech-CustomUnits⁠

⁠

Create a branch from main using the following format:

[Jira-Ticket-Code]-[clientname]-[optional-additional-keywords]

Create a folder in the correct year folder and start coding.

Standards to follow

Our ad units follow a set of standards and best practices. For this reason, we have a

boilerplate⁠

to start a bespoke project.

If you want to start from scratch, please take care of the following details.

Unit sizing

We use calculated heights FlexXLs to ensure the optimal visibility in different ad slots.

You can use this snippet as a base to size your unit.

body {

--height: calc(100vw * 1.88);

--min-height: 400px;

--max-height: 600px;

height: var(--height);

min-height: var(--min-height);

max-height: var(--max-height);

}

@media screen and (min-width: 350px) and (max-width: 414px) and (max-height: calc(100vw * 2)) {

body {

--height: calc(100vw * 1.5);

}

@media screen and (max-width: 374px) {

body {

--height: calc(100vw * 1.5);

}

GAM Macros

The code must include a series of macros to be used by the architecture serving our ads.

Unit wrapper

<body

data-pos="%%PATTERN:pos%%"

data-prop="%%PATTERN:prop%%"

data-uap="%%PATTERN:uap%%"

<div

data-vp="%%PATTERN:vp%%"

data-prop="%%PATTERN:prop%%"

data-pos="%%PATTERN:pos%%"

data-uap="%%PATTERN:uap%%"

</div>

</body>

Outbound Links

href="%%CLICK_URL_UNESC%%%%DEST_URL_UNESC%%"

target="_blank"

class="button"

onclick='(function(){ET.track({

type:"clickURL",

location: "item name .. (ie: logo, background ..."});})()'

>Link Label</a

/* sample */

<a target="_blank" href="%%CLICK_URL_UNESC%%%%DEST_URL%%" onclick='(function(){ET.track({type:"clickURL", location: "logo"});})()'> <img> logo image .... </>

</a>

Tracking

Then unit must include the Event Tracker (ET) script, after the unit code to implement effective event monitoring of our ad units. (please keep the script below inside the <body> script goes here ... </body> tags)

const loadScript=(t,e=!0,a="text/javascript")=>new Promise((s,r)=>{try{let d=document.createElement("script");d.type=a,d.async=e,d.src=t,d.addEventListener("load",t=>{s({status:!0})}),d.addEventListener("error",t=>{r({status:!1,message:`Failed to load the script ＄{t}`})}),document.body.appendChild(d)}catch(c){r(c)}});

const ETwithRandom = 'https://static01.nytimes.com/ads/creative-tech/flex-frames/lib/ad-tracking.min.js';

loadScript(ETwithRandom)

.then(data => {

window.PageViewID = 'PID_placeholder';

let TAPV_ID = '%%PATTERN:ta_page_view_id%%';

let NYTPV_ID = '%%PATTERN:page_view_id%%';