February 14, 2022
Add Analytics to Your Website Using Google Analytics 4
DURATION
15mincategories
Tags
share
Google Analytics allows us to add analytics to our website by following some simple steps. We are going to take a look at Google Analytics 4, which is a new version of Google Analytics that comes after the Universal Analytics version. Google Analytics comes with the event-driven data model design. This new design gives us the flexibility of collecting analytics from both web and app platforms. Also, this version has many other differences from the last, including the new set of reports.
Create Google Analytics Account
Let’s start by creating our account in Google Analytics. It is very simple to do, just follow these steps:
Step 1: Follow the link to Google Analytics and make sure that you are logged in with your Google account.
Step 2: Click on the “Start Measuring” button. Then provide the name to your account and click on whichever options you prefer to share.
Step 3: Give a name to your property, (whatever you like to call it), and select your time zone and currency. Then click Next.
Step 4: Give details about your business and select all checkboxes for which you want to measure data. Click Create.
After agreeing to all terms and conditions your account will be created.
Create Data Stream
While creating an account we added a property in our Google Analytics, but if you want to create a different property then follow these steps:
Step 1: In the Account column on the Admin page you can find the property section. Click on Create Property.
Step 2: Add the details including property name, time zone, currency, and others, then click Next.
Step 3: Add details about your business and click checkboxes for which you want to measure data. Click Create to create the property.
Once you are ready with your property then do the following to add a data stream:
Step 1: You should be able to see the “choose a platform” option for the data stream. You can choose whichever platform your app/website is for.
If this option does not appear then you can go to the Admin page and find Data Streams in the admin column. Click on it then select the platform.
Step 2: A popup will appear in which you have to give your website URL and a name to this data stream. You can enable or disable enhanced measurements (I recommend you enable it) which allows you to use already implemented enhanced measurements features of Google Analytics 4. Then click on Create Stream.
Step 3: You will see the global site tag code under tagging instructions. Copy and paste that code in your website’s header (make sure this code contains your measurement ID. If not then add it, which will be on top of this popup).
The code will look similar to the below code:
1 2 3 4 5 6 7 8 9 10 11 12< !--Global site tag(gtag.js) - Google Analytics-- > <script async src="https://www.googletagmanager.com/gtag/js?id=<Measurement_ID>"></script> < script > window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', '<Measurement_ID>'); </script>
Once that is done then you are ready to add events in your Google Analytics. If you have enabled enhanced measurement then you should be able to see some analytics in the report and real-time sections.
Using Google Tag Manager
If you don’t want to add gtag.js directly to your page, but you want to add Google Tag Manager for all your tags, create an account in Google Tag Manager. Once that is done you will find two pieces of code that you have to add to your website/app code which will look like:
Add in <head> tag, as high as possible.
1
2
3
4
5
6
7
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});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','<Container_ID>');</script> <
!--End Google Tag Manager -->
Add in <body> tag, just after opening <body> tag.
1 2 3 4<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<Container_ID>" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> < !--End Google Tag Manager(noscript) -->
Once that is done then add the GA4 configuration tag by following the steps below:
Step 1: Click on the tag (in the left sidebar) in Google Tag Manager then click on New to create a new tag.
Step 2: Add tag configuration by clicking the “choose tag type” box. Then click on Google Analytics: GA4 Configuration.
Step 3: Write your Measurement ID of GA4.
Step 4: Add a trigger by clicking the “choose a trigger” box or it will directly ask you to add it after adding Measurement ID.
Step 5: Choose All Pages then save the changes.
Step 6: By now GTM will be connected with GA4. You need to submit new GTM Tags changes and publish them to see the changes take place in GA4.
You can use preview to debug in GTM and then you can open the debug section (which you can find in configure) in GA4 to see events happening in one place.
Conclusion
Google Analytics 4 is a good, easy way to add analytics to your website/app. And with this new version we can use Analytics for any platform. Also, remember that there is more to learn about Google Analytics and there is more to feel the power of GA4.