feat(gatsby-plugin-google-gtag/tagmanager): Use Script Api for adding gtag scripts

[jawakarD]

Description

• We Introduced Script API but it's not being used in the official analytics plugins, so here I start with gtag plugin, I'm also planing to add the change to the tagmanager plugin in this PR too, as it's related.

Documentation

• Update docs with new field strategy
• Update docs to add partytownProxiedURLs for off-main-thread strategy
• Update docs to add partytown-venilla-config to use proxy url for scripts tht doesn't send correct CORS headers like Universal google analytics.

Somthing like:

import React from "react";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="partytown-vanilla-config"
      dangerouslySetInnerHTML={{
        __html: `partytown = { 
          debug: true,
          resolveUrl(url, location) {
            if (url.href.includes('google-analytics.com/analytics.js')) {
              // Use a secure connection
              if (url?.protocol === 'http:') {
                url = new URL(url.href.replace('http', 'https'))
              }

              // Point to our proxied URL
              const proxyUrl = new URL(location.origin + '/__third-party-proxy')
              proxyUrl.searchParams.append('url', url)

              return proxyUrl
            }

            return url
          }
        }`,
      }}
    />,
  ]);
};

Related discussion

#36598

[jawakarD]

I have a doubt if this window.gtag call will happen after the partytown initialization, so that we won't miss the first pageview event.

gatsby/packages/gatsby-plugin-google-gtag/src/gatsby-browser.js

Line 18 in a629551

window.gtag(`event`, `page_view`, { page_path: pagePath })

[kb1995]

@jawakarD Would this PR also update the gatsby-plugin-google-tagmanager plugin or do I need to migrate to gatsby-plugin-google-gtag?

[jawakarD]

@jawakarD Would this PR also update the gatsby-plugin-google-tagmanager plugin or do I need to migrate to gatsby-plugin-google-gtag?

I'm planning to update gatsby-plugin-google-tagmanager too after clearing the doubt I have. But working with tag-manger for off-main-thread is tricky, as we may or may not need to mention the scripts that tag manger will download to gatsby's partytownProxiedURLs. This might be a overhead.

https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/#resolving-urls

[burakozdemir32]

@jawakarD: any updates on this ?

[burakozdemir32]

I have a doubt if this window.gtag call will happen after the partytown initialization, so that we won't miss the first pageview event.

gatsby/packages/gatsby-plugin-google-gtag/src/gatsby-browser.js

Line 18 in a629551

window.gtag(`event`, `page_view`, { page_path: pagePath })

This code snippet is from the documentation on how to integrate Partytown with gtag:

// gatsby-browser.js

export const onRouteUpdate = ({ location }) => {
  if (process.env.NODE_ENV !== 'production') {
    return null;
  }

  const pagePath = location ? location.pathname + location.search + location.hash : undefined;
  setTimeout(() => {
    if (typeof gtag === 'function') {
      gtag('event', 'page_view', { page_path: pagePath });
    }
  }, 100);
};

https://www.gatsbyjs.com/blog/how-to-add-google-analytics-gtag-to-gatsby-using-partytown/

[nrallakis]

@jawakarD Any updates?
Is there any way to load gtag without hurting pagespeed scores?

[Muata]

Hey! any updates?

[jawakarD]

Is this still needed? I could look into it next week maybe.

[Muata]

Is this still needed? I could look into it next week maybe.

Yes, please:)

[kb1995]

Is this still needed? I could look into it next week maybe.

This would be amazing - looking for best ways to optimise my GTM script

[Muata]

Hey, this is a significant issue when it comes to website optimization and obtaining better results through Google search. That's why I'm frequently asking: have you happened to take a look at it? 😸