Theorem Boilerplate

This is a single code base ( desktop / tablet / mobile all in one ) unit with a single point of entry ( same code to be used for all platforms and devices). However there are separate Custom Templates for Desktop and Mobile. This repo is using vite technology for packaging.

REPO

⁠

https://github.com/nytimes/TBrandCreativeTech-CustomUnits/tree/main/2024/theorem_boilerplate⁠

⁠

GETTING STARTED

git clone

https://github.com/nytimes/TBrandCreativeTech-CustomUnits/tree/main/2024/theorem_boilerplate⁠

⁠

- npm install

- npm run dev ( for development )

- npm run build ( production code for deployment )

TO DO IN GAM

- Once in GAM, user can drop the code from the build/deployment on the HTML, JS and CSS

fields as it corresponds. This build has an example of a custom build to

visualize the implementation of the Event Tracker software. Please delete

HTML, CSS link style 'example-test.css' and JS link 'example-test.js' in

this build.

- Once the build is copied, user can drop the code of own build. This is

only a wrapper with defaults for the custom template.

TO ADD TRACKING EVENT

To add the tracking event you can do it in both ways shown below:

Adding anchor tag, wrapped element to be tracked and adding a class of NYTAdTrack to the anchor tag, also specify the type and location of event as shown in below example. Please see example attached on HTML custom build on logo elements.

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

target="_blank"

class="NYTAdTrack"

data-event-type="type of Event"

data-event-location="location of event">

<img

src="https://static01.nytimes.com/ads/creative-tech/images/test_logo.png"

alt="logo" />

</div>

</a>

2. Adding an event listener to the element to be tracked and add the ET track function with type and location attributes specifying type and location of event. Please see example as on the custom JS of this custom build for elements background and cta.

const bgImg = document.querySelector('.bg-image');

const cta = document.querySelector('.content-cta');

bgImg.addEventListener('click', () => {

ET.exit({type: 'clickURL', location: 'background'});

});

cta.addEventListener('click', () => {

ET.exit({type: 'clickURL', location: 'cta'});

});

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.