Google Analytics 4 is a new kind of Google Analytics, with different reports than what you're used to seeing in Universal Analytics properties. One advantage of a Google Analytics 4 property is that you can use it for a website, an app, or both a website and an app together. Universal Analytics properties only support websites. You can read the announcement from Google to learn more.
What's covered in this article:
- What is Client Side Tracking?
- Setting up a New Google Analytics 4 Account
- Google Analytics 4 Conversion Tracking Setup
- Google Tag Manager Ecommerce Purchase Events
- Optimize your Integration
Client Side Tracking
In client-side tracking, the tracking code is processed by the user's web browser. So, when someone visits a website, the tracking code runs on their browser and sends information about their activity back to Google. This means that the tracking is done on the user's end.
Setting up Google Analytics 4
If you already have an active GA4 account, skip to GA4 Conversion Tracking Setup.
Create a new Property
- In Admin, look at the Account column to ensure you've selected the right account.
-
Then, in the Property column, click Create Property.
-
Enter a name for the property and select the reporting time zone and currency.
- If a visitor comes to your website on a Tuesday in their time zone, but it's Monday in your time zone, the visit is recorded as having occurred on Monday.
- If you choose a time zone that honors Daylight Savings Time, Analytics automatically adjusts for time changes. Use Greenwich Mean Time if you don't want to adjust for Daylight Savings Time.
- Click Next. Select your industry category and business size.
- Click Next. Select how you intend to use Google Analytics.
- Click Create and (if you are setting up a new account) accept the Analytics Terms of Service and the Data Processing Amendment.
- Continue to Add a data stream to start collecting data.
Creating a Data Stream
If you are installing any Google Analytics for the first time, you’ll be prompted to create a new data stream based on whether it is a web or an app.
- Select Add Streams > Web
-
Then, you’ll be prompted to enter details – like your website URL – to set up the new data stream.
- According to Analytics Help, you can enable or disable enhanced measurement.
- Enhanced measurement automatically collects page views and other events. Once the data stream has been created, you can go back and individually disable the enhanced measurement events you don’t want to collect. So, Analytics recommends that you enable enhanced measurement now.
- Once the Data Stream is created the Measurement ID is what will be used to identify the stream.
Google Analytics 4 Conversion Tracking Setup
The steps below will help you navigate the Google Analytics 4 account to find the Measurement ID, GA4 Script, and configure cross-domain tracking.
-
Select Property > Admin
- Once you are in the Admin tab under Property select Data Streams and select proper stream to prompt configuration settings.
- Within the Data Stream select Configure Tag Settings > Configure your domains > Match Type Contains > include checkout.xola.app, checkout.xola.com, and your website URL
- Once you have the domains configured we can start implementing the tracking script on the website. The gtag.js script can be found by selecting ‘View tag instructions’ within the Stream details.
- This is the gtag.js script that needs to be pasted within your website code before the end </head> tag.
Google Tag Manager Ecommerce Purchase Events
To configure Google Analytics 4 tag in your Google Tag Manager container please read this article provided by Google for proper steps.
If gtags are managed via Google Tag Manager follow the steps below to configure Ecommerce purchase events. It is important to note that if this is not configured in the GTM container, you may experience a drop in conversions made on desktop.
- Go to the Google Tag Manager page, click on tags, and then click on New.
- When choosing the type of tag, select Google Analytics, then Google Analytics: GA4 Event
- Add your GA4 measurement ID to the event, set the event name as {{Event}} and check the Send Ecommerce data checkbox:
- Add a trigger for this event. ON Trigger selection panel, click on “+”,
- Select custom event:
- Add "view_item|view_item_list|add_to_cart|add_payment_info|purchase" as the event name and check regex matching checkbox:
- To capture Xola user properties add xola_user_properties to the string above. Example string below.
- view_item|view_item_list|add_to_cart|add_payment_info|purchase|xola_user_properties.
- During the purchase, the Xola user properties event won’t be picked up automatically from the confirmation page so, adding this to the Event name will assist in capturing these properties if needed.
- Save and publish your container, and you should be ready to go!
Configure GTM Container ID in your Xola account
If you have multiple tags firing in your Google Tag Manager we recommend configuring your GTM Container ID within your Xola account. Naturally, desktop will load the GTM container in checkout, while mobile will load the gtag. By configuring the GTM container ID in Xola it allows for a more complex setup to capture higher conversions/events by loading the container in checkout for both mobile and desktop. To configure the GTM container ID navigate to Marketing > Conversion Tracking > Google Tag Manager.
Optimize Your Integration
Follow these steps to ensure a seamless connection between your website and Google Analytics 4 via Xola.
Preliminary Step: Install the Xola Checkout Javascript
- Locate the Javascript Code: Find the Xola Checkout Javascript code within your Xola account by navigating to Settings > Button Code and locating Step 1.
- Implement the Code: Insert the Javascript code as close to the top of the <head> section of your website as possible. This positioning ensures that the script loads promptly when visitors arrive at your site, facilitating accurate tracking from the outset.
Button Code Installation and Analytics Integration
To ensure accurate tracking and integration with Google Analytics, follow these consolidated guidelines:
- Direct Installation: Embed Xola’s button codes directly into your website’s HTML code. Avoid using plugins that create iframes within website builders, as this method may fail to capture conversions.
- Analytics Integration Setup: The Google Analytics integration must occur within the checkout iframe for accurate tracking. Ensure the checkout button on your site either opens in a pop-up or is directly embedded. Avoid buttons that redirect to a xola.checkout.com URL, as these will not track conversions.
- Resource for Proper Installation: For a comprehensive guide on correctly installing Xola buttons, check out this article.
Optimize Your Tag Management
Minimize gtag.js Scripts: If Google Tag Manager is being used to handle your tags, ensure only necessary scripts are present. Reducing the number of gtag.js scripts helps prevent potential conflicts and streamlines page loading times.
Update Analytics Scripts
Remove Outdated Scripts: Eliminate any scripts associated with Universal Analytics to avoid discrepancies in revenue or conversion data. Keeping your site updated with only the necessary scripts ensures accurate data collection.
Leverage Custom Conversion Tracking
Google Ads Conversions: To track conversions from Google Ads effectively, utilize the Custom Conversion Tracking feature found under the Marketing tab in your Xola dashboard.