What is the Data Layer?

Google Tag Manager (GTM) relies on a global array (window.dataLayer) to push event objects to and process them from. GTM listens to this array for events and reacts to each event. For example, after an add to cart event on a website a snapshot of the data layer may look as follows...

window.dataLayer = [
	{ event: "gtm.dom", ... }, // user loads a page
	{ event: "dl_view_item",  ... }, // user views a product
	{ event: "dl_add_to_cart",  ... }, //	user adds a product
  ...
];

// Pushing a new event into the data layer
window.dataLayer.push({ event: "dl_remove_from_cart", ... });

Elevar has its own global array (window.ElevarDataLayer). Any events that you want to be handled and processed by Elevar must be pushed to this array instead (we forward events to window.dataLayer too).

Add Initialization Code

Add this code to run before any of your Data Layer pushes occur (before any window.ElevarDataLayer.push calls):

 window.ElevarDataLayer = window.ElevarDataLayer ?? [];

If this code is not run before your pushes, those calls will fail, so make sure the above code runs first.

Special Properties and Utilities

Elevar only processes data layer events that are pushed via the window.ElevarDataLayer.push utility function. The processing enables Elevar to do the following:

• Data Layer event enrichment (Elevar-specific identifiers and device-specific information)
• Debugging (more to come on this!) to make the developers life easier
• Send data layer events server-side

// Elevar will process
window.ElevarDataLayer.push({ event: "dl_sign_up",  ... });

// Elevar will not process
window.dataLayer.push({ event: "dl_sign_up", ... });

Route Changes

Any navigation changes without a reload will ideally notify Elevar via a utility. This utility will update the contextual information that Elevar uses to enrich Data Layer events. The utility can be used like so:

window.ElevarInvalidateContext?.()