Integrate Modern Analytics Tracking stack to Your Website
How to install Tag Manager, Facebook Pixel to your Web and integrate it with Google Analytics 4
In my previous post: Deploy to Firebase Hosting, I’ve shared about how I deployed my static custom-built website to Firebase. It shocked me on how seamless and user-friendly the deployment process was. In this episode, I’ll share with you my personal experience on how I installed Google Tag Manager, Facebook Pixel and integrate it to Google Analytics 4.
Objectives and Prerequisites
✅ Deploy simple static personal website to Firebase. Read my guide here.
🚧 Install Google Tag Manager + Facebook Pixel to your web
🚧 Seamlessly integrate it to Google Analytics 4
1 — Introduction
What is Google Tag Manager? Google Tag Manager is a tag management system that enables you quickly update tags on your website or mobile app. Once you’ve added the GTM code snippet to your website, you can start deploy analytics from your website.
Google Analytics 4 property (previously called an App + Web property) is an update within the Google Analytics (GA) product.
Google Analytics for Firebase (Firebase Analytics) vs. Google Analytics 4 vs. Universal Analytics — What is the difference?
TL;DR: Google Analytics for Firebase (formerly Firebase Analytics) is now known as Google Analytics 4. Google Analytics for Firebase feeds data into Google Analytics 4.
Google Analytics 4 is the new gen of GA product (integrated in Firebase). Universal Analytics is the previous gen (live separately from Firebase).
Below is the screenshot of my Google Analytics for Firebase (Firebase Analytics) vs Google Analytics 4 — it shows exactly the same analytics.
2 — Considerations
Before install, I considered what kind of information I want to collect and hence determine which tags I will need. If the data you collect is not available in GTM, you might want to check out the developer documentation on how to pass additional data to tags. In this tutorial, I’ll walk-through basic events.
3 — Install Google Tag Manager
At a high level, there are 3 steps:
- Create Google Tag Manager account
- Install the container in your web
- Set up and submit your tags
Step 1. Create Google Tag Manager account and container
In Tag Manager, click Create Account > enter your account name > enter a descriptive container name, select the type of content: Web > click Create > Add your new container to existing account
Step 2. Install the container
Click Workspace > Click into your container ID to launch the Install Tag Manager box. Your container ID is formatted as “GTM-XXXXXX” near the top right of your window > Copy and paste one code snippet in the <head> tag of your website, and the other after the opening <body> tag.
Note: For me to avoid the confusion, I pasted one in the bottom of my <head> tag, and the other right on top after opening of <body> tag in each of my .html file because my Web is Multi-Page. If your Web is Single Page App, I believe pasting the GTM snippet code in your index.html will do.
Below is the screenshot of my code base.
Step 3. Set up and submit tags
In your GTM dashboard, click Add a new tag highlighted in yellow below.
(1) — Title your tag
(2) — Tag configuration: choose a tag type — Google Analytics: GA4 Configuration
(3) — Measurement ID: key in your container ID, formatted as “GTM-XXXXXX”. You can find it near the top right of your GTM dashboard window.
(4) — Triggering: choose a trigger (All Pages Page View) to determine when the tag is record and hit SAVE
Then activate your tag by clicking Submit. Your tag won’t work until you do so. When you hit Submit, you’ll see Submit Changes page. You have 2 options: Publish and Create Version or Create Version. For me I clicked Publish and Create Version > Publish because I am ready to publish this tag to my live website.
And that’s done for creating your first tag: Google Analytics — Page Views.
4 — Google Analytics 4 — Set up Events and Conversions
Use case: Just now we finished creating our first tag: Google Analytics — Page Views for our website. So whenever someone views your site, this tag will fire a page_view event and appear in your Google Analytics. But what if your website is multi-page? My site has Home, About, Blog, Contact, for each of which has a different sub-url (/about.html ; /blog.html).
What if I want to track analytics for each url? How can I do it? Here’s how I set up events in Google Analytics to track page views for each url. The guide may look lengthy with lots of screenshot, but hang in there it’s easier than it looks!
Step 1: Go to Google Analytics > Analytics Account > choose your Properties & App. If you deploy your website to Firebase, a Google Analytics 4 properties will be auto created under the list All Accounts.
Step 2: In your Google Analytics 4 dashboard, on left column, Click Configure > Events > Create event > Create button.
You name your event name aspage_view_about. Under Matching conditions, event_name equals page_view (page_view is the tag manager you had created earlier remember), page_location contains <your sub-url> if your website is multi-page and you want to track website visitors for each sub-url. Then you hit the SAVE button on top right corner and that’s done for 1 event page_view_about— which is to track event in your About page.
Below is the screenshot for detailed steps.
Set up Conversions
After you set up events, you can choose some certain events as conversions. To do so, navigate to Conversions > click New conversion event > key in your event name that is available under Events list.
Note: The Existing events list (screenshot shown above) might take 24 hours. You might see this after setting up your events. Don’t freight! There is nothing wrong with your setup. It’s just getting a while to see your first event here. Yesterday night I didn’t see it appear right away after setting up. Take a break and come back later (probably tomorrow 😂) and you will see it 😎.
Yayy you did it! We’ve successfully completed installing Tag Manager, set up Events and Conversions in GA4 (pat yourself in the back) Wait overnight and you’ll see analytics in GA4 dashboard. Here’s mine.
5 — Install Facebook Pixel
If you have a Facebook ads account and want to install pixel in your custom-built website to track visitors behaviour, here’s my basic guide.
Step 1 — Create a Facebook Pixel
Go to Events Manager > Navigate to top left column, Click Connect Data Sources, select Web > Select Facebook Pixel, click Connect > Add your Pixel Name > Enter your website URL > click Continue
Step 2 — Add Facebook Pixel to your website
There are 3 ways to do it (manually, use a partner integration, and email instructions). Since my website is custom-built, I will manually add pixel code to my website.
Paste the pixel code into the <head> tag in every single .html file if your web is multi-page.
Step 3 — Set up Facebook pixel events
Go to Events Manager > Settings > Click the Open Event Setup Tool button
Then Enter your web URL and click Open Website
Key Note: It took me a while to realise this. If you don’t see this box pop up on top left of your website, go check your Ad block. When I turned this off on this website, the Event Setup Tool box appeared.
Click Track New Button > Click on a highlighted button to set up your event > Choose your event name.
4 — Confirm your pixel is working with the Facebook pixel helper
I highly recommend you install this to check if your event set up is fired. You can download here.
To Review…
Okie so far, we’ve managed to deployed static web to Firebase, installed Google Tag Manger and FB Pixel and integrate it to Google Analytics 4.
Objectives and Prerequisites
✅ Deploy simple static personal website to Firebase. Read my guide here.
✅ Install Google Tag Manager + Facebook Pixel to your web
✅ Seamlessly integrate it to Google Analytics 4
Next steps
Github Actions + Firebase Hosting!
In my next episode, I will cover about GitHub Actions + Firebase Hosting — how to automatically deploy your website whenever you push to Github. Very soon, I’ll delve into Google Cloud Platform (GCP) integration with BigQuery and Data Studio). I’ll be back really soon so stay tuned! I hope my beginner’s guide could do some help to you! Byee byee see you soon👋
