1. Xola
  2. Xola Configuration
  3. Web Tracking
  4. Google Analytics Integration

Google Analytics 4

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:

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.

Note: Client-side tracking can be affected by ad blockers and browser settings.

 

Setting up Google Analytics 4

If you already have an active GA account, skip to Migrating from UA to GA4

New Google Analytics Account

  1. Sign up for a Google Analytics account 

Create a new Property

  1. In Admin, look at the Account column to ensure you've selected the right account.
  2. Then, in the Property column, click Create Property.
  3. 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.
  4. Click Next. Select your industry category and business size.
  5. Click Next. Select how you intend to use Google Analytics.
  6. Click Create and (if you are setting up a new account) accept the Analytics Terms of Service and the Data Processing Amendment.
  7. 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 if it is a web or an app.

  1. Select Web
    Screen_Shot_2021-10-04_at_9.24.30_AM.png
  2. Then, you’ll be prompted to enter details – like your website URL – to set up the new data stream.Screen_Shot_2021-10-04_at_9.25.34_AM.png
  3. According to Analytics Help: You can enable or disable enhanced measurement.

Migrating from UA to GA4 for existing UA accounts

  1. Log in to your Google Analytics account.
  2. Click the Admin icon in the lower-left corner.
  3. Click on GA4 Setup Assistant in the Property column in the center of the window.
  4. Click Get Started in the “I want to create a new Google Analytics 4 property” section.
  5. Click Create and Continue on the Create a new Google Analytics 4 property.
  6. On the Start measuring data section on the Set up a Google tag window, there are two options:
    • Use a Google tag you already have: If you have an existing Google tag, click the Choose a tag button to select the tag. 
      • Select the existing tag you want to convert to GA4 from the list.
      • Click on See your GA4 property to access your new GA4 property.
    • Install a Google tag: If you don't already have a Google tag, or just want to create a new one, click Install a Google tag to create a new one and follow the instructions.

Determine which type of google analytics implementation is on your website 

I am using Universal analytics(gtag.js), how do I shift to GA4?

To confirm if you are using gtag.js, go to your website, right click and select ‘View page source’,
press control & F to find keyword 'gtag' or skim through the source, if you find below code snippet with gtag as present below it means that you are using gtag.js.

 

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X8C3W9FZTL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-X8C3W9FZTL');
</script>

 

After determining this please refer to this support article by Google on how to complete migration from UA to GA4.

 

I am using Google tag manager (gtm.js), how do I start using GA4?

To confirm if you are using gtag.js, go to your website, right click and select ‘View page source’,
press control & F to find keyword 'gtm' or skim through the source, if you find below code snippet with GTM as present below in 6th line it means that you are using Google tag manager (gtm.js).


<!-- 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','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->


After determining this please refer to this article from Google that gives an in-depth explanation of the GA4 implementation. 

 

I am using old Universal Analytics snippet code (Analytics.js), how do I Shift to GA4?

To confirm if you are using analytics.js, go to your website, right click and select ‘View page source’
press control & F to find keyword analytics.js or skim through the source, if you find below code snippet with analytics.js present in 6th line as below it means that you are using old Universal analytics.

 

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'TAG_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->


After determining this to migrate to GA4 follow the steps mentioned in this article from Google. Once the GA4 property is created, delete the old code snippet from your website header and replace it with the GA4 property code snippet.

 

Note: There is no change required on Xola Account to implement GA4.

 

Mapping data between Xola and GA4

Xola sends various properties about purchases. GA4 refers to these as Dimensions. GA4 allows you to create custom reports with specific dimensions as well as the ability to establish filters on them.

The following is a mapping table that describes all the dimensions Xola sends to GA4.

GA4 Dimension Description
Item name The name of the purchased experience/gift
Item category Xola informs GA4 of each line item from the purchase. This could be a Demographic, or an Add-on.
Item category 2 The name of the "Item category" as configured in Xola (e.g. Adult, Child, Pickup Location)
Item coupon Any coupon code that was used in the purchase
Transaction ID Order/Purchase ID

 

In addition to dimensions, Xola also sends certain Metrics to GA4. Metrics are quantitative measurements such as guest quantity or amount and is always a numeric value.

GA4 Metric Description
Item quantity Count of a particular Item Category (e.g. number of Adults)
Item revenue Earnings from a particular Item Category
Tax amount Tax paid on a purchase

 

How to create Reports

E-commerce Report 

  1. In Google Analytics: Click Reports from the left menu panel & click E-commerce Purchasesbf09a469-3083-4d41-90af-b2696e568068.png
  2. Click Item Name to open a list of optionsfa74bc55-2408-4f92-a496-070863b03fed.png
  3. Select Item Category to display Add-On and Demographic Type ed7a955c-62f3-4db8-b87c-434adb020b33.png

Custom Report

Before we get into the how part, for those who will be using universal analytics alongside the GA4 until July 1 2023, you might see a difference in the revenue displayed in universal analytics vs Revenue displayed in GA4, This is due to the fundamental change in the way the revenue is calculated in GA4.

In Universal Analytics, the Revenue is calculated as follows:

  • Revenue = Item x Qty + Tax - Discount (if any)

In GA4, Google Calculates Revenue:

  • Revenue = Item x Qty

So to get a comparable value to Universal Analytics, you will have to Add Tax & subtract the discount amount, if any, from the Revenue amount displayed in GA4.

Steps to Create Custom Reports

  1. Select Explore Tab from the left menu and click Blank Card.8e16e49c-cb39-4c37-a622-ebb6eb7ecb7c.png
  2. Give a name to the Custom Report and then click + sign to add Dimensionsce6d4d10-fdff-4e40-9127-ffaba96efce8.png
  3. Search and select the dimensions and then click Import.
  4. To import the required dimensions, check the below screenshot to verify.abf9da41-a325-4ea0-b0c9-fd75f165b53d.png
  5. Now import Metrics the same way you did dimensions in steps 3 &4 
  6. Drag & Drop Dimensions & Metrics into the sections as indicated below to get the below view of the report.3378359b-d8ec-4cec-b182-f5768dd42593.png

For information on reports in Google Analytics, click here. 

Troubleshooting

  • Make sure you copy and paste the Gtag.js tag verbatim to your website. DO NOT copy it first to a Word or Google Doc; copy and paste it from there to your site. This can add extra spaces or characters that will cause it to break.  
  • Make sure you add the Gtag.js code into your opening head or use a Google Analytics-approved plugin through your CMS (like WordPress).
    If you set it up through Google Tag Manager, ensure it is configured and tracking correctly. 
  • You can use the Google Tag Assistant free Chrome plugin to verify that the tag works.



Was this article helpful?
0 out of 4 found this helpful