This document explains how to configure Google Analytics 4 and integrate it into your existing web site, for instance the one created following the HOWTO Create a Landing Page on Netlify.
In this session we'll cover the basics of Google Analytics 4, including how to surface AI driven insights for your customers and how to create and use reports
Presenters:
- Ainhoa Ybanez - Advertising Solutions Architect, Mobile Apps, Google
- Grant Kemp - Advertising Solutions Architect, Mobile Apps, Google
In this follow up session, we'll explore workspaces in GA4 and you'll learn how to build custom tables and visualizations of your data
Presenters:
- Ainhoa Ybanez - Advertising Solutions Architect, Mobile Apps, Google
- Grant Kemp - Advertising Solutions Architect, Mobile Apps, Google
Login to https://analytics.google.com/
Create a new Analytics Account, or choose an existing one.
Click Admin, then + Create Property. The following page should be displayed:
Fill in the Property details. In our example:
- Property name (Required):
baroloteam
- Reporting time zone: Italy
- Currency: Euro (€)
then click Next and fill in our Business details. In our example:
- Industry category (Required): Hobbies & Leisure
- Business size (Required): Small - 1 to 10 employees
Click Next, then choose our business objectives.
In our example:
- Generate leads
- Drive online sales
- Raise brand awareness
- Examine user behavior
- Get baseline reports
When you are done, click Create. The wizard will show the following page:
In our example we only choose "Web". We should now set up our web stream.
Fill in the required information - in our example:
- Website URL: https://baroloteam.online
- Stream name: baroloteam.online stream
- Enhanced measurements: (leave defaults)
then click Create stream. After a few seconds the stream details will be displayed:
Click View tag instructions to display code snippet to be injected into your website. In our example:
Reference: https://www.gatsbyjs.com/docs/how-to/testing/ab-testing-with-google-analytics-and-netlify/
Edit file src/components/header.js
NOTE: For a site based on the https://github.com/netlify-templates/gatsby-ecommerce-theme template the file is called src/components/Header/Header.js
.
TODO