Cover image produced by Google
Background
Did you know that Google has released new Google Analytics a couple of weeks ago?
It's perfectly OK if you didn't. Until a few hours ago, I myself didn't know about it. Although I use Google Analytics everyday for my website(카지노사이트) SEO. Somehow Google Analytics haven't shown me any update alerts or messages. I heard about it from some of my colleagues.
What's new in updated version?
Google Analytics can now detect device switching (like when a user changes from mobile to desktop) and will show you unified and integrated web & app reporting.
And much more that I don't understand right now
Most importantly: It is now default experience for all Google Analytics properties and where Google is investing for future improvements.
Problem
As I wrote in the follwing DEV post
my website(카지노사이트) is built with Gatsby.
In Gatsby.js, you install legacy (well, not yet but if you know what I mean) Google Analytics with gatsby-plugin-google-analytics. Like this way:
gatsby-config.js
plugins: [
{
resolve: 'gatsby-plugin-google-analytics',
options: {
trackingId: 'UA-1*******0-2',
head: true,
defer: true,
},
},
...
]
The problem is, you cannot install newer version of Google Analytics in this way. And as far as I know, there is not a gatsby plugin for newer version yet. :(
Goal
For updated version, you need to add measurement ID that looks like G-********** and need to
Copy and paste this code as the first item into the
of every webpage you want to measure.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-**********"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-**********');
</script>
How to
1. Get GA4 stream measurement ID
First, log in to your Google Analytics account and click "Admin" button.
Next, click "Create Property" button.
Just ignore "Upgrade to GA4" here. It will take you to create property screen anyway.
Configure your property. Do as you like.
Then, select created property and click "Data Stream" tab, then click "Add stream" -> Web.
If you already have a Web stream, just click to see its details.
In detail page, you can get your measurement ID and gtag script:
2. Install acquired gtag in Gatsby project
My approach is a workaround but it will do its work before gatsby plugin update. I customized html.js as described in this article. FYI, html.js is what Gatsby uses to server render head tag and other components that React cannot touch.
First, copy .cache/default-html.js to html.js.
If you already have html.js, you can skip this step.
$ cp .cache/default-html.js src/html.js
html.js will look like the following:
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
...
Edit head tag like the following:
<head>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-**********"
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-**********');
`,
}}
/>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
</head>
Deploy your project.
Go to your Google Analytics and check if it works.
You can uninstall legacy tracking code and gatsby plugin after successful upgrade.
Conclusion
That's all folks!
If you find anything wrong in my post or have a better idea, please leave a comment to let me know.
If you're good at Gatsby.js, please come visit my website and share your idea. Any suggestion is welcome!
Top comments (7)
Thanks for your article, reading comments i tried to use the suggested plugin before implementing your solution(quiet interesting by the way) gatsbyjs.com/plugins/gatsby-plugin... and it works, just by adding it with npm install and also adding the plugin node values inside gatsby-config.js gatsbyjs.com/plugins/gatsby-plugin...
I copied my measurement id in "GA-TRACKING_ID" and it works. I expect more updates from official gatsby plugin, but for now seems to be ok
This gatsby-plugin-google-gtag plugin should do to the trick:
gatsbyjs.com/plugins/gatsby-plugin...
Example code please?
Example code is on the plugin page :-)
Ok , thanks.
But where is example code?
For GA4?
Thanks! Helped me👍
Great tutorial, but your website links to a casino website. Either this is a very creative backlink scheme or you've been hacked.