Google provides two ways to use Google Analytics 4 on a website.
- The Google tag (gtag.js)
- The Google tag is a single snippet of code that you paste in the <head> tag on each page of your website HTML code. The Google tag uses a JavaScript library called gtag.js. When you want to collect additional data from your website, you must change the JavaScript in your website code.
- Google Tag Manager
- Google Tag Manager is a tag management system by Google. To use Tag Manager, you need to add two snippets of code to your website HTML code — one in the <head> HTML tag and one at the top of the <body> HTML tag. Once you add the two snippets on each page of your website, you can use the Tag Manager interface (rather than changing the JavaScript on your website) to collect additional data from your website.
You just need to pick one way to enable Google Analytics 4, if you're not familiar with Google Tab Manager, we recommend you use the Google tag (gtag.js) way, as it's much more simple to setup.
Use Google Analytics 4 with gtag.js
1. Install gtag.js on the site
Then paste the script to your site -> Settings -> SEO / HTML -> HTML content for bottom of <head> section
2. Setup Ecommerce purchases event
Go to site -> Settings -> SEO / HTML -> Checkout conversion analytics scripts
Then add the below code.
<script>
gtag("event", "purchase", getGA4PurchaseData());
</script>
Use Google Analytics 4 with Google Tag Manager
1. Install Google Tag Manager on the site
And then you will need to get the install code.
Then you can put the first section of code to the site -> settings -> SEO / HTML -> HTML content for bottom of <head> section. The second section code can be put to "HTML content for top of <body> section"
2. Setup Ecommerce purchases event
After that, you need to put the below code to the site -> Settings -> SEO / HTML -> Checkout conversion analytics scripts
<script>
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "purchase",
ecommerce: getGA4PurchaseData()
});
</script>
getGA4PurchaseData method
From the above examples, you can see we are using a javascript function called "getGA4PurchaseData".
This is a helper method that will converter current order data to the Google Analytics 4 purchase event data structure.
And this method is only available on the order complete page. For example, the URL would like yourstore.com/complete/1161
The method will return data following the below structure
{
"transaction_id": "1161", // order number
"value": 137.58, // order total
"tax": 12.38,
"shipping": 1,
"currency": "USD",
"coupon": "promo10off",
"items": [
{
"item_id": "test-uom-engine", // product public part number or product url name
"item_name": "Test UOM Engine", // product name
"coupon": "",
"index": 0,
"price": 1.35, // per item product price minus discount
"discount": 0.15,
"quantity": 1,
"affiliation": "nuxtb2c.v6.localtest.me",
"item_category": "Engines",
"item_category2": "",
"item_category3": "",
"item_category4": "",
"item_category5": ""
},
{
"item_id": "uom-test",
"item_name": "UOM Test",
"coupon": "",
"index": 1,
"price": 0.819,
"discount": 0.091,
"quantity": 150,
"affiliation": "nuxtb2c.v6.localtest.me",
"item_category": "Engines",
"item_category2": "Business Cards, Letterhead, Envelopes",
"item_category3": "Price Engine Test",
"item_category4": "",
"item_category5": ""
}
]
}
getPresseroPurchaseData Method
There is another method you can use on the order complete page, it's getPresseroPurchaseData.
This method will return the original Pressero order data, which allows you to get those data for advanced usage.
The data follow the below structure
{
"orderId": "60580000-64c5-e86a-cbb9-08db16681249",
"orderNumber": "1161",
"total": 137.58,
"subTotal": 138,
"shipping": 1,
"promoDiscount": 13.8,
"promos": [
{
"code": "promo10off",
"name": "Test Promo",
"type": "DiscountPercentageSubtotal"
}
],
"promoCode": "promo10off",
"tax": 12.38,
"currency": "USD",
"storeDomain": "nuxtb2c.v6.localtest.me",
"storeName": "Nuxt B2C",
"items": [
{
"orderItemId": "60580000-64c5-e86a-34b1-08db16681259",
"seq": 1,
"quantity": 1,
"totalPrice": 1.5,
"perItemPrice": 1.5, // per item product price without discount
"totalPromoDiscount": 0.15,
"perItemPromoDiscount": 0.15,
"productName": "Test UOM Engine",
"productId": "705e0000-b7b9-00ff-ce1a-08d8b64570f8",
"productUrlName": "test-uom-engine",
"productPublicPartNum": "",
"promoCode": "",
"promos": [],
"itemCategory1": "Engines",
"itemCategory2": "",
"itemCategory3": "",
"itemCategory4": "",
"itemCategory5": ""
},
{
"orderItemId": "60580000-64c5-e86a-ea0f-08db1668133f",
"seq": 2,
"quantity": 150,
"totalPrice": 136.5,
"perItemPrice": 0.91,
"totalPromoDiscount": 13.65,
"perItemPromoDiscount": 0.091,
"productName": "UOM Test",
"productId": "6f9b73cb-15da-461d-b8b0-4d519822b9df",
"productUrlName": "uom-test",
"productPublicPartNum": "",
"promoCode": "",
"promos": [],
"itemCategory1": "Engines",
"itemCategory2": "Business Cards, Letterhead, Envelopes",
"itemCategory3": "Price Engine Test",
"itemCategory4": "",
"itemCategory5": ""
}
]
}
Advanced Usage
You can use "getGA4PurchaseData" or "getPresseroPurchaseData" methods on the order complete page as other javascript methods.
You just need to call the method, then it will return an object containing current order data. Then you can access the object to get the properties.
For example, insert the below code to the Checkout conversion analytics scripts textarea will show a simple alert dialog with the order total price.
<script>
var orderData = getPresseroPurchaseData();
alert(orderData.total);
</script>
For example, you want to push some order data to dataLayer with a custom event
<script>
var orderData = getPresseroPurchaseData();
dataLayer.push({
'orderTotal': orderData.total,
'orderID': orderData.orderNumber,
'orderCurrency': orderData.currency,
'event': 'yourEventName'
});
</script>