AspDotNetStorefront supports asynchronous e-commerce tracking using Universal Analytics (analytics.js). This version of Google Analytics in AspDotNetStorefront allows you to make modifications to the Google Analytics code without modifying core source code.
To use this latest analytics code, your Google account will need to be set for Universal Analytics. To check the status of your GA account (Universal or Classic), you can check which JavaScript Library your tracking code is referencing. To do so, login to your Google Analytics account and click Tracking Code to see the tracking code snippet for a specific property. Look for ga.js or analytics.js referenced somewhere in the code. Classic Google Analytics properties reference ga.js and Universal Analytics properties reference analytics.js.
First you will need your Google Analytics account number. You can find this code by logging into your Google Analytics account. The interface on Google Analytics changes frequently but you should find the number on the page where you get your tracking script. Copy the UA-xxxxxxxx-x number from this page.
Once you've got the UA number, navigate to your admin console and add the account number to the Setting: Google.AnalyticsAccount.
Lastly, make sure that the Setting: UseLiveTansactions is set to Yes. This setting assures that Google Analytics only runs on your live website.
At this point you have completed the installation of Google Analytics. You should be able to view page source on the front end of your website and see the Google Analytics code.
Google Analytics Ecommerce Tracking
If you would like to enable ecommerce tracking you just have two more steps to complete.
First, login to your Google Analytics account and enable e-commerce tracking. The interface tends to change, but look under ADMIN(tab) > View > Ecommerce Settings.
Next, log in to the admin console and set the Setting:Google.EcomOrderTrackingEnabledto Yes.
That's it! At this point your site will send order data up to Google Analytics when your customers check out.
Google Analytics Enhanced Ecommerce is an official plugin
for Google Analytics which tracks product impressions, clicks and
add-to-carts, from both product and entity pages. It also includes
tracking for searches, checkout, and order completion. This uses
Google's modern "analytics.js" plugin.
Setup
Google Analytics Account
Select the correct Analytics Account from the dropdown in your Google Analytics account
Go Admin ->(View column) - Ecommerce Settings
Set Enable Ecommerce to TRUE and Enable Enhanced Ecommerce to TRUE
Admin Console Configurations
Google.AnalyticsAccount - Required for both Google Analytics Ecommerce Tracking and Enhanced Ecommerce, it takes the form "UA-XXXXX-Y".
UseLiveTransactions - Should be true to prevent Analytics data being logged from a test site.
Google.EcomOrderTrackingEnabled - Enables Google Analytics Ecommerce tracking on order completion. Before setting to true, set Google.EnhancedEcommerce.Enabled to false.
Google.EnhancedEcommerce.Enabled - Enables Google Enhanced Ecommerce. Before setting to true, set Google.EcomOrderTrackingEnabled to false.
Google.EnhancedEcommerce.ImpressionClickTracking.Enabled - If set to true, this enables tracking on entity, search, and featured listing pages. It should be set to false if enabling it interferes with the usability of your site.
Vortx.DataLayer.Enabled - This setting must be true if using Google Analytics Enhanced Ecommerce. It defaults to false.
Skin Merges Needed for Tracking
If you have previously modified versions of Xml packages in your site prior to upgrading to 10.0.23+
Any XMLPackages in the below list of supported XMLPackages on which you want tracking
script.bodyclose.xml.config if you want tracking on the checkout page
Supported XMLPackages
These XMLPackages will need to be manually merged (such as using Beyond Compare or a knowledgeable developer) with new 10.0.23+ packages if they have
been modified in order to allow Google Analytics Ecommerce Tracking or Enhanced Ecommerce to take effect.
entity.grid.xml.config
entity.gridwithprices.xml.config
entity.simpleproductlist.xml.config
entity.tableorderform.xml.config
entitygridpage.xml.config
featuredproducts.xml.config
page.bestsellers.xml.config
page.kitheader.xml.config
page.recentadditions.xml.config
relatedproducts.xml.config
page.search.xml.config
page.searchadv.xml.config
product.SimpleProduct.xml.config
product.SimpleProductLargeImage.xml.config
product.tabbed-responsive.xml.config
product.TabbedUI.xml.config
product.TextbookFull.xml.config
product.VariantsInDropDown.xml.config
product.VariantsInGrid.xml.config
product.VariantsInRightBar.xml.config
upsellproducts.xml.config
Updating Google Analytics to GA4
Google Analytics can be upgraded to GA4 by using the Tag Manager setting and topic in the storefront, which is thrown on all pages (assuming the stock script.head.xml.config is still being called in your skin's _Head.cshtml file).
NOTE: GA4 can run alongside basic Universal Google Analytics and Enhanced Ecommerce if desired.
Step Overview:
1. Follow the instructions for GA4 using the GA4 Setup Assistant
2. After that, the objective is to get the gtag.js code onto every page.
- This can be done using the existing Script.Google.TagManagertopic and the Google.TagManager.Enabledsetting.
- Set Google.TagManager.Enabled = true
- Edit the topic Script.Google.TagManager in the admin, click the HTML button, paste in the gtag code from Google Analytics.
DETAILS:
In Google Analytics, once you've upgraded your property to GA4 you get this window.
Click the highlighted tag installation arrow:
It takes you to your GA4 property. Click on your property.
On the next window, copy the gtag text circled below and paste it into your Script.Google.TagManager topic:
Copy the gtag text into your Script.Google.TagManager topic, making sure to click the HTML button first.
Save your topic.
The data will take a while to show up in google analytics on your GA4 property.