S
SolidJS•2mo ago
Daniel Sousa @TutoDS

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
Renato Magalhães•2mo ago
I'd love to see answers to this. I'll be needing this soon +1
Daniel Sousa @TutoDS
Daniel Sousa @TutoDSOP•2mo ago
Already try a lot of things, nothings working Anyone can help me please?
hannus
hannus•2mo 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?