kronnox
commented
3 weeks ago Generally speaking we have full control over what, where and when we we add something. We just have to be cautious to not completely destroy our good performance scores with slow analytic scripts. Golden rule here is too keep it to a minimum. Where ever possible we'll only add the scripts after the LCP is loaded to not delay site rendering. We can just use the delayed.js for this purpose and everything else is just basic JS. An example to add the GTM script within the delayed.js:
const GTM_SCRIPT = `
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}
gtag('set', 'linker', {"domains":["www.example.com"]} );
gtag("js", new Date());
gtag("set", "developer_id.<id>", true);
gtag("config", "<id>");
`;
function loadGTM() {
const tag = document.createElement('script');
tag.type = 'text/javascript';
tag.async = true;
tag.id = 'google-gtagjs-js';
tag.src = 'https://www.googletagmanager.com/gtag/js?id=<id>';
document.querySelector('head').append(tag);
const script = document.createElement('script');
script.type = 'text/javascript';
script.id = 'google_gtagjs-js-after';
script.innerHTML = GTM_SCRIPT;
tag.insertAdjacentElement('afterend', script);
}
rwcsrichardspencer
ericvangeem
With the site nearing completion, we'll need to integrate our tracking, analytics and other scripts. Where/how do we manage these scripts? Are they inserted into the
of the HTML? Do we have flexibility in the placement of these scripts? (such as footer if needed). Putting this here for tracking and knowledge sharing on how it will be set up. @dkuntze @MarquiseRosier