Knowledge Base / Custom creative templates for Google Ad Manager

How to use JS callback events with custom creative templates?

With JS callbacks, you can make changes on your website on various creative template stages (for example, to change website CSS styles on a creative initialization) or update a creative template's appearance from your website (for example, close a creative).

Supported templates

JS callbacks can be entered in the field "JS callback" which is disabled by default. To enable this field for a template, enable this field in the template's customization form.

Events and methods can be called by accessing JS variable "tmpl".

The JS object “tmpl” structure

Key	Format	Description
id	String	Unique JS callback ID
code	String	A creative template code
e*	DOM element	An HTML element object of a template
on	function(event, callback)	JS function to register an event
call	function(method, params)	JS function to call an API method

Floater

code: floater
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
call("close"): closes a creative

Slider

code: slider
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
on("appear"): callback for an event when a creative appears fully within a viewport
call("close"): closes a creative

Wallpaper

code: wallpaper
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
call("close"): closes a creative

Expander

code: expander
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
on("expand"): callback for an expanding event
on("collapse"): callback for a collapsing event
call("close"): closes a creative
call("expand"): expands a creative
call("collapse"): collapses a creative

Baselayer

code: baselayer
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
on("layerOpen"): callback for a layer appearing event
on("layerClose"): callback for a layer disappearing event
call("close"): closes a creative
call("showLayer"): shows a layer
call("hideLayer"): hides a layer

Parallaxer

code: parallaxer
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
on("appear"): callback for an event when a creative appears within a viewport
on("disappear"): callback for an event when a creative disappears from a viewport
call("close"): closes a creative
call("redraw"): repositions a creative

Catfisher

code: catfisher
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
on("appear"): callback for an event when a creative appears fully within a viewport
call("close"): closes a creative

Intexter

code: intexter
eCont: the creative template base DOM element
eFrame: an "iframe" HTML element that calls the creative template
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
on("appear"): callback for an event when a creative appears within a viewport
call("close"): closes a creative

Roller

code: roller
eCont: the creative template base DOM element
eFrame: an "iframe" HTML element that calls the creative template
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
on("pause"): callback for a pause event
on("resume"): callback for a resume event
call("close"): closes a creative
call("pause"): pauses a creative animation
call("resume"): resumes a creative animation
set("stop", true): stops a creative appearance
set("stop", false): loads a creative

Interstitial

code: interstitial
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
call("close"): closes a creative

Responsiver

code: responsiver
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
call("close"): closes a creative

Cube

code: cube
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
call("close"): closes a creative

Sitebar

code: sitebar
eCont: the creative template base DOM element
eFrame: an "iframe" HTML element that calls the creative template
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
call("close"): closes a creative

Masthead

code: masthead
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
on("closeSticky"): callback for a closing event of sticky ad
on("sticky"): callback for a sticky ad appearance event
on("static"): callback for a base ad appearance event
call("close"): closes a creative
call("disableSticky"): closes sticky layer and its further appearance

Backgrounder

code: backgrounder
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
call("close"): closes a creative

Slash

code: slash
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("move"): callback for the divider moving event (1st argument returns the cursor position)
on("close"): callback for a closing event
call("close"): closes a creative

Welcomer

code: welcomer
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("scroll"): callback for the vertical scrolling event (1st argument returns visible part of the ad in percentages)
on("close"): callback for a closing event
call("close"): closes a creative

Carousel

code: carousel
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
call("close"): closes a creative

Rotator

code: rotator
eCont: the creative template base DOM element
on("init"): callback for an initialization event
on("load"): callback for a loading event
on("close"): callback for a closing event
call("close"): closes a creative

Examples

There are code samples. Enter just plain JS code in the field "JS callback".

To set a red background for a website when a creative template loads:

tmpl.on("load", function() {
	top.document.body.style.backgroundColor = "red";
});

To store "tmpl" object in a website scope for accessing it later:

top.genecyTmplObj = tmpl;

To close a creative template after 10 seconds:

setTimeout(function() {
	tmpl.call("close")
}, 10 * 1000);

To add the closing button to a template:

tmpl
.on('load', function() { 
	var eCloseBtn = document.createElement("a");
	eCloseBtn.href = "#";
	eCloseBtn.innerHTML = "X";
	eCloseBtn.setAttribute("style", "display:block;width:30px;height:30px;text-align:center;line-height:30px;font-size:24px;background-color:#fff;color:#000;position:absolute;top:18px;right:0;border:1px solid #000;text-decoration:none;");
	tmpl.eCont.appendChild(eCloseBtn);
	eCloseBtn.addEventListener("click", function(e) {
		e.preventDefault();
		tmpl.call('close');
	});
})
.on('close', function() { console.log('The template has been closed'); })
;

To add a watermark logo to the top-right corner:

tmpl.on('load', function() { 
	var eLogo = document.createElement('img');
	eLogo.src = "https://www.genecy.com/build/images/logo_black.svg";
	eLogo.setAttribute("style", "display:block;position:absolute;top:10px;right:10px;width:120px;height:auto;z-index:99999999;margin:0;border-radius:0;border-width:0;background-color:rgba(255,255,255,0.4);padding:4px;");
	tmpl.eCont.appendChild(eLogo);
});