Up next in 10
Astro Google Analytics Integration - Quick & Easy
15K views
Nov 22, 2022
Learn how to integrate Google Analytics 4 into your Astro project! Written Guide: https://www.ceos3c.com/web-development/astro-google-analytics-integration/ WSL2 Course: https://www.udemy.com/course/the-complete-wsl2-course/?referralCode=416CFE2149DDEA06F34E WSL2 Series: https://www.ceos3c.com/category/wsl-2/ ⮘-=[⭐All important links in one place⭐]=-⮚ ↬ https://linktree.stefanrows.com ⮘-=[⭐All the stuff I use⭐]=-⮚ ↬ https://www.amazon.com/shop/ceos3ctutorials ⮘-=[⭐Join this channel to get access to perks⭐]=-⮚ https://www.youtube.com/channel/UCDqZyVCTwg9UyRWKgQ7Gizg/join ⮘-=[Subscribe]=-⮚ ↬ https://www.youtube.com/stefanrows?sub_confirmation=1 ⮘-=[Sign Up to my popular 5-Bullet-Friday Newsletter]=-⮚ ↬http://eepurl.com/cNJ_Dj
View Video Transcript
0:00
Hey guys, what's up everyone. Welcome back to a new video
0:03
In this video I just want to quickly show you how to integrate Google ytics inside of an Astro project
0:10
If you don't know what Astro is, Estro is a rather new JavaScript framework or web development framework, however you want to call that
0:19
And it has seen good rise in popularity in the last couple of weeks and month
0:25
And I just started using it a couple of weeks ago and I really, really like it
0:29
really like it. It's the web framework that resonates the most with me of all of the latest
0:34
frameworks and I will release a bunch of beginner-friendly tutorials, maybe a crash course on
0:41
Astro in the near future. So if you're interested in that, make sure to subscribe. Now for this
0:46
video, we're going to create a new Astro project and then we are going to integrate Google ytics
0:51
for GA4 into the Astro project using the official plugin Party Town. As you guys know by
0:59
we always provide a written tutorial that goes along with our videos and this video is no different
1:04
Now we're actually gonna take the first step using this article because I don't want to blur my whole screen
1:11
while showing you Google ytics. I assume you already created a Google ytics property and that's
1:17
how you ended up here. But if you don't know how to create a Google property, a new Google
1:22
property Google ytics property then you can pull up this article here where I
1:29
have a little bit of an instruction how to do that so you create a new
1:32
property in Google ytics 4 and I recommend you guys creating a Google
1:37
ytics for property because the old versions of Google ytics will be end
1:41
of life sometime next year I think in the early early parts of next year so
1:47
definitely create a Google ytics for property right away and the way and the way
1:52
how to do that is you create a property inside of Google ytics and then you click on
1:55
data stream you will end up there anyway if you go through the create a new property
2:00
process there is the link for it how you create it there are step-by-step
2:04
instructions provided by Google if you don't know how to do that just click on
2:08
that and daily do step by step anyhow if you are there you have your property
2:14
selected and I'm sorry I cannot zoom in more on the screenshot here and then you
2:19
click on data streams and then you click on your property and then you you click on view tag instructions and once you click on view tag instructions a new window
2:26
comes up and then you want to select install manually and then you get your google code that you need to
2:32
integrate into your astro project the problem is just you cannot just drop that inside of your head
2:40
because that will not work we need a third party tool for that to work and we are going to use
2:46
the official astro integration party town for that and that's what we're going to do
2:52
next. So just for the sake of this tutorial I will create a new astro project so I'm
2:57
going to CD into my tutorials folder here and I'm gonna run NPM create
3:03
astro at at astro at latest there we go and that brings up the creating a astro project so you can see the version here is 1 that I using just so you get an idea what it is and then I just going to call that Google
3:22
not Google, Google minus ytics and then I'm just going to leave it at best practices
3:31
and I would like to install the dependencies probably takes a bunch of seconds here to finish
3:37
Actually creating an astro project is really really quick. So we might just wait for that
3:44
And by the way, while I'm here, this is WSL2 that I'm using
3:49
I'm on Windows. If you want to know how to set up WSL2 that it looks exactly like this
3:54
I highly recommend you guys check out my WSL2 course that is available on UDMI
3:59
I'll leave the link in the video description below. And if you don't want to go through the whole course
4:03
I have a free tutorial series that I will also leave for you guys
4:07
in the description so you can get that too. Would you like to initialize a new Git repository
4:12
Yeah, whatever. And then I'm going to use strict for TypeScript. Yep, it's fine with us
4:20
And now we are done with that. And we can CD into our Google ytics thing here
4:26
And then we can open up VS code inside of that new project
4:31
We need some space over here. Actually, for now, we don't need our constant
4:37
anymore so we can just make VS code real big and then we can start with the integration
4:43
So this is a default, very blank Astro project, how it looks like if you just create that
4:51
And we actually forgot to install one thing so I shouldn't be so quick on closing that terminal
4:57
So we actually need to install party tone of course. So we do NPM install and then minus D at Astrojs PartyTown
5:03
And it's actually going to help us out here with auto completion. There we go. Just take a couple of seconds and then if we look inside of our package.Json
5:13
we should see that here as a dependency, it's Astro Jazz Party Town 1.0.1
5:22
Okay, so the next thing we are going to do is we need to actually integrate Google ytics into the Astro project and how we do that
5:30
We don't go in the public folder, but we go in the source folder. I can close up this terminal again
5:36
And then where we want to include it in the default project
5:41
I think the head is in the layout. Yes, it is. So this is where we want to integrate it
5:47
and we want to integrate it right here. GA or Google ytics, ytics code
5:56
We want to integrate it right on top as the first thing inside of our head
6:00
Now I just don't want to throw that in there, like the bare code, it will just clog up things
6:06
in our layout, I want to still use the layout later on and I want to, it looks nice
6:11
So we do a component-based approach. That means we are going to create a new component for our Google ytics code to have everything nice and clean
6:21
So I go to components to the components folder and I going to create a new file called Google ytics snippet or just let call a Google ytics We don need the snippet thing
6:33
And in here, remember your Google ytics code that you hopefully copied earlier and if not, now is the moment, go over to Google ytics and copy that code snippet that I've showed you in the article a little while ago and can pull it up again
6:50
I'm talking about this one. So you're just going to copy and paste that and your Google ytics code your measurement ID should be already in there
6:58
So that's the easiest way to do that and I'm going to do the same in fact
7:02
So I'm going to copy and paste that and I'm going to paste it in here now when we paste it in here we can see that it's actually drawing us some errors and this is because we have to
7:14
Inject some script tags that tells the script to use party tone
7:21
for our handling as a service worker. So we do, where is it
7:27
I can't remember everything top of my head either. So we do type, we add a type tag here
7:32
and we say text, forward slash not JavaScript, but party town. Okay, and the same thing on the other script tag
7:42
type equals text forward slash party town. And if we had save, then the error should
7:51
disappear. Now as a final step, of course, you have to replace, if you have this placeholder in here
7:57
if you copied that from the website, you have to replace this value and this value with your actual
8:03
Google ytics measurement ID. That's the only thing you need to replace here. I'm not going to do
8:07
that right now of obvious reasons. And the next thing, the last thing we still need to do is we need
8:13
to import that thing into our layout. So we go to our layout and I'm just going to do the import
8:19
on top we do import Google ytics from components ytics. Astro and then we have it imported we don't have it implemented yet so I'm going
8:30
to go underneath of this comment tag and then I'm going to implement Google
8:34
ytics right here and now we have our Google ytics available on the website or on our project and the way to test it is to just do
8:44
NPM run deaf and it's a good thing to see if we get some errors now we don't get any kind
8:49
error so we can open up our browser. I'm just going to throw that over here
8:55
Give it some space. There we go. No, this is what I don't want
8:59
I want this in here. And then I'm going to do, I'm going to open the developer console here and I'm going to open the elements here and close all that stuff
9:11
And I'm going to open the head and let's see Google ytics code
9:17
There it is. Now it probably doesn't get injected. So you probably won't see it because Party Town is handling all of that
9:23
But at least you can see that our Google ytics tag is here. And that should actually be inside of the head
9:29
I'm not sure why it moved that. Why did it move that
9:34
That's weird. It created another head tag or did I do something wrong here That weird I never seen that before Anyhow I going to throw that down Out of some reason it moved the head Okay Okay Now it looks like it should look like
9:51
Maybe I deleted something too fast. So there it is. Now we have the Google ytics code in here
9:59
and it's actually showing up. So there it is. Now of course with my placeholder measurement
10:04
idea and you probably can't see anything. but it is right there. So there is the Google ytics code inside of our head tag
10:12
Now if you deploy that code, it will take a little while until it updates
10:19
Of course, until Google ytics see some traffic. You probably have to go to your website a bunch of times
10:25
Usually it takes up to 48 hours. That's a pretty accurate description or estimate of how long it takes for that code to update on the Google ytics side
10:36
it depends also how much traffic your website gets if it gets more traffic it's probably faster
10:41
but for me it usually took around two days one day two day depending on the project that I was
10:48
integrating anyway that's it that's how to install Google ytics on Astro or how to integrate
10:55
Google ytics in an Astro project I hope this tutorial was helpful for you guys let me know
11:00
in the comments below if you manage to integrate Google ytics into your Astro project
11:04
And another note on Astro, I really like it. I just recreated my whole portfolio website or my personal website with Astro
11:14
It's stephanrose.com if I want to check that out. And I really like it
11:18
It's really easy and intuitive. Of all of the last new web development, JavaScript frameworks, whatever you want to call it
11:26
I've tried. I like Astro the best by far. I thought I really like View, which I do
11:33
View is cool, but I really like Astro better. It just flows with me, it just makes sense to me
11:40
whereas a lot of the other frameworks kind of hard to understand for me at times
11:46
but Astro really, really flows and it's nice and it just works for me
11:52
So I'm planning to create some more tutorials on Astro because I'm using it heavily at this moment
11:58
I created a block with Astro, it's a really fast block, directly 100
12:03
on Google WebVitals. It's crazy. If you guys want to know something, if you want to have a
12:08
specific tutorial, if you want to have a crash course on Astro, if you want to have an Astro Beginner
12:14
series for web developers or whatever, let me know in the comments below. If this video
12:19
gets enough likes, comments, shares, whatever, I'm going to create a whole Astro Beginner
12:24
Series for you guys. Let me know if there is any interest. All right, I'll see you back in the
12:30
next one. Thanks for watching
#Web Services
#Web Stats & Analytics