Google Analytics

Hi everyone I'm trying to add Google Analytics to my Solid Start project, but no data appears on the analytics page. Already try two ways: - Using script loader
createScriptLoader({
src: 'https://www.googletagmanager.com/gtag/js?id=G-3BGEJC7QPE',
onLoad() {
const dataLayer = window.dataLayer || [];

function gtag(...args: unknown[]) {
dataLayer.push(args);
}

gtag('js', new Date());
gtag('config', '<id>');
},
});

createScriptLoader({
src: `
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.jxs'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','<id>');
`,
});
createScriptLoader({
src: 'https://www.googletagmanager.com/gtag/js?id=G-3BGEJC7QPE',
onLoad() {
const dataLayer = window.dataLayer || [];

function gtag(...args: unknown[]) {
dataLayer.push(args);
}

gtag('js', new Date());
gtag('config', '<id>');
},
});

createScriptLoader({
src: `
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.jxs'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','<id>');
`,
});
- add the code on onMount
const script = document.createElement('script');
script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
script.async = true;
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
window.gtag = (...args: unknown[]) => {
window.dataLayer.push(args);
};

window.gtag('js', new Date());
window.gtag('config', measurementId);
const script = document.createElement('script');
script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
script.async = true;
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
window.gtag = (...args: unknown[]) => {
window.dataLayer.push(args);
};

window.gtag('js', new Date());
window.gtag('config', measurementId);
Anyone can help me please?
3 Replies
Renato Magalhães
I'd love to see answers to this. I'll be needing this soon +1
Daniel Sousa @TutoDS
Already try a lot of things, nothings working Anyone can help me please?
hannus
hannus5w ago
step1: create script with createScriptLoader. asnyc() is must.
const gaTag = createScriptLoader({
src: "https://www.googletagmanager.com/gtag/js?id=`urGtagid`",
async onLoad() {
// @ts-ignore
window.dataLayer = window.dataLayer || [];
function gtag() {
// @ts-ignore
dataLayer.push(arguments);
}
// @ts-ignore
gtag("js", new Date());
// @ts-ignore
gtag("config", "gaid");//change to your gaid
},
});
const gaTag = createScriptLoader({
src: "https://www.googletagmanager.com/gtag/js?id=`urGtagid`",
async onLoad() {
// @ts-ignore
window.dataLayer = window.dataLayer || [];
function gtag() {
// @ts-ignore
dataLayer.push(arguments);
}
// @ts-ignore
gtag("js", new Date());
// @ts-ignore
gtag("config", "gaid");//change to your gaid
},
});
step2: insert {gaTag} into JSX, such as header or footer inside the router component. that will work. Key points: 1. async() 2.insert to JSX where you want to collect statistics

Did you find this page helpful?