E-Commerce Tracking via Google Analytic 4

[dannyleungkc]

Hi all,

Does anyone have experience of creating E-Commerce tracking via Google Analytic 4 with Swell? Basically tracking events such ass Add to cart, View Items and Purchase etc.

I can easily implement tracking on page views with my Swell store. But not sure about e-Commerce event based tracking.
I saw a lot of tutorials on Youtube but it doesn't seem to work with Swell.

Or could Swell create an article about this? I think this is very important tool to have.

Regards,
Danny

[vettloffah]

I found the best way is to use google tag manager to send data to GA4. In your front end code, you add the GTM global script, and then you can post dataLayer events for each event you want to track.

Here's the google documentation for how to post events to the dataLayer: https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm

So, you basically get the cart data from swell and create a dataLayer event from it. You can customize the data to post as little or as much data as you need to track.

Then from within GTM, you send the data to GA4 using the GA4 tag.

It takes a bit of planning - knowing what you want to end up with in the end on in GA4.

Which framework are you using to run your store on? I could post some code examples.

[osseonews]

This is an interesting suggestion. We were starting on GA4 also and were getting stuck. We are using NextJs. Do you have any code for that? Thanks.

[dannyleungkc]

I found the best way is to use google tag manager to send data to GA4. In your front end code, you add the GTM global script, and then you can post dataLayer events for each event you want to track.

Here's the google documentation for how to post events to the dataLayer: https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm

So, you basically get the cart data from swell and create a dataLayer event from it. You can customize the data to post as little or as much data as you need to track.

Then from within GTM, you send the data to GA4 using the GA4 tag.

It takes a bit of planning - knowing what you want to end up with in the end on in GA4.

Which framework are you using to run your store on? I could post some code examples.

Thanks for your response, so I'm also looking at this route - using Google tag manager and trying to push data to GA4. However, Swell's checkout page doesn't have the cart/purchase data layer by default. So I'm stuck at this step and looking for a tutorial to create a data layer for the checkout page. So far I've found an article showing a template data layer codes block for Shopify's checkout. But not sure how to adjust it to make it compatible with Swell's. But I'm not a developer so a bit of help would be very much appreciated.

[vettloffah]

We are tracking add_to_cart, view_cart, and begin_checkout prior to getting to the hosted checkout from swell.

By turning on the custom order receipt page option in the checkout settings, you can forward the user to order confirmation page and post the purchase event to the dataLayer there.

So you'd be missing the extra steps during the checkout process, but tracking the other ones above. That's the solution we're going with, but aren't 100% finished yet.

There might be a way to inject a script into the hosted checkout itself to track without forwarding to a confirmation page, but I'm not sure how you would actually detect if the user completes the purchase. I guess by parsing the html and looking for certain text, but that seems like a hack.

[vettloffah]

Here's a helper function to post dataLayer events from swell data that I use in our site front end. This requires that you have the GTM script loaded in every page.

/**
 * Add an ecommerce event to the datalayer for google tag manager
 * @param name - event name, e.g. 'add_to_cart'
 * @param items - array of swell products or swell cart items that are included in the event
 * @param value - dollar value of the event
 * @param cart - pass in cart data if we want the current cart contents updated on the dataLayer
 * (separate from the `ecommerce` event data)
 */
export default function gtmEcommEvent( name, items, value, cart) {
	// add cart contents to dataLayer if cart object was passed in before adding event
	if (cart) {
		window.dataLayer.push({ cart: null })
		window.dataLayer.push({
			cart: {
				items: cart.items.map((item) => {
					return {
						item_id: item.product.sku,
						item_name: item.product.name,
						quantity: item.quantity,
						price: item.price
					}
				}),
				checkout_url: cart.checkout_url,
				value: cart.sub_total,
				cart_id: cart.id
			}
		})
	}

	if (items?.length) {
		window.dataLayer.push({ ecommerce: null }) // Clear the previous ecommerce object.
		// check if type is swell product
		if (items[0].hasOwnProperty('sku')) {
			window.dataLayer.push({
				event: name,
				ecommerce: {
					items: (items).map((product) => {
						return {
							item_id: product.sku,
							item_name: product.name,
							quantity: 1,
							price: product.price
						}
					}),
					value,
					currency: 'USD'
				}
			})
		} else {
			// we know it's not a product, so it must be a cart item
			window.dataLayer.push({
				event: name,
				ecommerce: {
					items: (items).map((item) => {
						return {
							item_id: item.product.sku,
							item_name: item.product.name,
							quantity: item.quantity,
							price: item.price
						}
					}),
					value,
					currency: 'USD'
				}
			})
		}
	}
}

examples:

import gtmEcommEvent from "utils/gtmEcommEvent"

// add to cart
gtmEcommEvent('add_to_cart', [product], product.price * quantity, cart) // cart is optional

// view cart
gtmEcommEvent('view_cart', cart.items, cart.sub_total, cart)

//begin checkout
gtmEcommEvent('begin_checkout', cart.items, cart.sub_total, cart)

[logeshswell]

I would also like to include the guide to setup GTM in the Swell dashboard below:
https://www.swell.is/help/metrics-and-reporting/Metrics%20and%20reporting%20overview#link-google-tag-manager

[dannyleungkc]

Thank you @vettloffah