When a website loads, the browser fetches JavaScript files like the Dotdigital Tag in the background.
If your site tries to call any window.ddg API methods before the Tag script is ready, this throws errors, or valuable customer data simply doesn’t get recorded.
This is especially important if:
your site loads JavaScript asynchronously (async scripts, dynamic injection)
your site uses a Single Page Application (SPA) framework, for example, React, Angular, or Vue
a visitor to your site has a poor network connection.
Of course, you want to be sure that your tracking and personalization work, no matter how quickly your site loads. This is where the initialization snippet can help.
What the snippet does
The initialization snippet is a small piece of JavaScript that runs before the main Dotdigital Tag script loads.
The snippet ensures all customer data is reliably captured.
To do this it:
creates a temporary queue for any data or commands sent to the Dotdigital Tag
safely stores those calls if the main Tag script hasn’t finished loading
replays the calls automatically once the Tag script is available.
How to use the snippet
Dotdigital Marketing automatically generates the initialization snippet when you create a Dotdigital Tag profile.
The snippet just needs to be copied exactly from the Connection code side panel of the Dotdigital Tag connection settings page.
The snippet appears in the side panel directly before the Tag. When you add the code to your website, the snippet must remain before the Tag, and be placed before the closing </head> tag in the site’s source code.
The below is an example only and must not be copied. You must copy the Initialization snippet and Dotdigital Tag scripts generated in your account.
<!-- Initialization snippet -->
<script>(()=>{"use strict";const e=Object.freeze({tracking:"tracking",processed:
"processed",response:"response"}),d=window;if(d.ddgReady||(d.ddgReady=new Promise
(e=>{d.ddgTagLoaded=e,d.addEventListener("ddgTagLoaded",()=>e(),{once:!0})})),
!d.ddg){d.__ddgEventsQueue=d.__ddgEventsQueue??[];const n=d,t=(e,n)=>(...t)=>
d.ddgReady.then(()=>{const d=e();if("function"==typeof d?.[n])return d[n]
(...t)}),s={on:(e,n)=>(d.__ddgEventsQueue.push([e,n]),()=>{}),channels:e},o=new
Proxy({},{get:(e,d)=>t(()=>n.ddg?.personalization,d)});n.ddg=new Proxy({events:s,
personalization:o},{get:(e,d)=>d in e?e[d]:t(()=>n.ddg,d)})}if(!d.__ddgEmitter)
{const e={},n={};d.__ddgEmitter={on:(d,t)=>((e[d]=e[d]??[]).push(t),(n[d]??[])
.forEach(e=>{try{t(e)}catch{}}),()=>{const n=e[d].indexOf(t);-1!==n&&e[d].splice
(n,1)}),emit(d,t){const s=n[d]=n[d]??[];s.push(t),s.length>50&&s.shift(),(e[d]??
[]).forEach(e=>{try{e(t)}catch{}})}}}})();</script>
<!-- Main tracking script (Dotdigital Tag) -->
<script async src="https://r1.ddlnk.net/DM-1234567890-01/ddgtag.js"></script>
Content Security Policy (CSP)
If your site runs a CSP which blocks the Initialization snippet inline script, but you still want to use it, then your website team or agency can make an amendment to the CSP to allow inline scripts using a hash.
Use a tag manager
You can add the Dotdigital Tag to your site using a tag manager. If you want to do this, there are some considerations:
If you manage all scripts on your site through a tag manager, you don’t need to use the Initialization snippet. You can simply add the main Dotdigital Tag tracking script and use the tag manager’s sequencer to ensure that the Dotdigital Tag runs before any other scripts.
If you have some scripts running in a tag manager, and others not, you must make sure the Initialization snippet is placed before the code that runs the Dotdigital Tag, whether this is inside or outside of a tag manager.
If you don’t use a tag manager, you must include the Initialization snippet before the main Dotdigital Tag tracking script.