Tracking Commerce Events Using Google Analytics 4 (GA4)

Google Analytics 4 (GA4) is an analytics service that enables you to measure traffic and engagement across your websites and apps. By using GA4, you can track which items on your Bbot menu are most popular and lead to the highest number of sales for those items. 

Before you set up any tracking events, you will need to add your Measurement ID, which can be found in your Google Analytics 4 account. To locate your Measurement ID:

  • Log into your GA4 account
  • Click on the gear icon in the bottom-left of the screen, which will take you to the Account and Property settings.
  • Under the 'Property' settings, click on 'Data Streams', and you will need to add your Bbot ordering URL by clicking on 'Web' under 'Choose a Platform'. In the popup window, enter the URL and name for your BBbot Branded Ordering Site and click 'Create Stream'.
  • In the popup window, you'll be shown the Web Stream details where you can find your Measurement ID.

After you've located the Measurement ID, you will need to link your Google Tag Manager account. Log into your Google Tag Manager (GTM) account and click 'Add New Tag'.

Enter a new name for your tag i.e. 'GA4 Configuration' followed by your Measurement ID and click 'Tag Configuration' to customize the new tag.

In the popup window, select the 'Google Analytics: GA4 Configuration' for your tag type.

Enter your Measurement ID and click on the 'Triggering' box to begin configuring the trigger for the events.

Under the 'Choose a Trigger', select 'All pages'. After you select 'All Pages', click 'Save' in the top right corner. 

After clicking 'Save', you will be taken back to the main page. Click 'Submit' and then 'Publish' to finish linking your GA4 account to your Google Tag Manager account.

After connecting your account, you must configure a Google Tag Manager variable to capture and send to GA4. On the GTM dashboard, click on 'Variables' to begin adding a new variable to GTM.

In the bottom-right corner, click the 'New' button under 'User-Defined Variables' to begin adding a variable. 

Enter a name for your new variable, such as Ecomm Event, and click on the 'Variable Configuration' box.

In the 'Choose Variable Type' window, select Data Layer under 'Page Variables'. Data layer variables enable Tag Manager to read values from your data layer implementation and pass those values to tags, triggers, and other variables. 

In the 'Data Layer Variable Name' field, enter 'Ecommerce.value' and click save. This allows you to read the ecommerce.value data from an event emitted from a Bbot website and send that to your GA4 analytics account.

Please follow the steps above to create a Data Layer Variable for each value in the table below. 

Variable Name Variable Type Required Data Layer Variable Name
Ecomm - Value Data Layer Variable Yes ecommerce.value
Ecomm - Affiliation Data Layer Variable Yes ecommerce.affiliation
Ecomm - Transaction ID Data Layer Variable Yes ecommerce.transaction_id
Ecomm - Tax Data Layer Variable Yes ecommerce.tax
Ecomm - Shipping Data Layer Variable Yes ecommerce.shipping
Ecomm - Items Data Layer Variable Yes ecommerce.items
Ecomm - Coupon Data Layer Variable No ecommerce.coupon
Ecomm - Currency Data Layer Variable No ecommerce.currency
Ecomm - Charge Type Data Layer Variable No ecommerce.charge_type
Ecomm - Checkout ID Data Layer Variable No ecommerce.checkout_id
Ecomm - Fulfillment Method Data Layer Variable No ecommerce.fulfilment_method
Ecomm - Location Code Data Layer Variable No ecommerce.location_code

Configuring Custom Triggers

To be able to configure your Google Tag Manager tags to send data from GTM to GA4, you will need to configure a set of triggers for those tags to execute when the user performs specific actions. 

Click 'Triggers' on the left side of the dashboard and click 'New' to configure a new custom trigger.

Select 'Custom Event' for the trigger type and enter 'Ecomm - Purchase' as the trigger's name. 

In the 'Event Name' field, enter 'Purchase' and select 'All Custom Events' for the trigger fire. Selecting 'All Custom Events' means the trigger will fire whenever the custom event occurs without worrying about a set of conditions it must match. An example of a filter would be to only fire the GTM trigger when the GTM variable “Ecomm - Currency” equals “USD” for the given custom event. 

After completing all fields, click the 'Save' button to finalize your trigger. You will need to create a trigger following the steps above for each value in the table below.

Name Event Type Event Name Trigger Fires on 
Ecomm - Purchase Custom Event purchase All Custom Events
Ecomm - Add to Cart Custom Event add_to_cart All Custom Events
Ecomm - View Item Custom Event view_item All Custom Events
Ecomm - Remove from Cart Custom Event remove_from_cart All Custom Events
Ecomm - Edit Cart Item Custom Event edit_cart_item All Custom Events

We will then need to configure the tags for Google Tag Manager, which will cause the triggers you've created to fire and pass the event information to GA4. To create a new tag, click 'Tags' on the left-hand side of the screen and click 'New'.

Enter 'Ecomm Purchase' for the name and click 'Tag configuration'. In the pop-up window, select 'Google Analytics: GA4 Event' for the tag type.
In the 'Configuration Tag' dropdown, select the configuration created previously and enter the 'Purchase' in the 'Event Name' field. 
After you complete the fields above, you'll need to configure the Event Parameters for the Tag. This is the name of the parameter/property you want to send to GA4 with this purchase event. To add a Parameter Name, click the dropdown menu under 'Event Parameters' and click 'Add Row'.
Below is a list of recommended parameters for the tag that should be added.
Parameter Name Value
items {{ Ecomm - Items }}
transaction_id {{ Ecomm - Transaction ID }}
affiliation {{ Ecomm - Affiliation }}
value {{ Ecomm - Value }}
tax {{ Ecomm - Tax }}
shipping {{ Ecomm - Shipping }}
currency {{ Ecomm - Currency }}
coupon {{ Ecomm - Coupon }}
location_code {{ Ecomm - Location Code }}
fulfillment_method {{ Ecomm - Fulfillment Method }}
charge_type {{ Ecomm - Charge Type }}
checkout_id {{ Ecomm - Checkout Id }}
Select the trigger that will fire this tag by clicking on 'Triggering' and selecting the 'Ecomm Purchase' trigger that was previously created. After selecting the trigger, click 'Save'. 
To ensure data is being collected, you must create all of the tags and triggers below following all of the steps outlined above.
Name Type Event Name Trigger
Ecomm - Purchase GA4 Event purchase Ecomm - Purchase
Ecomm - Add to Cart GA4 Event add_to_cart Ecomm - Add to Cart
Ecomm - View Item GA4 Event view_item Ecomm - View Item
Ecomm - Remove from CartItem GA4 Event remove_from_cart Ecomm - Remove from Cart
Ecomm - Edit Cart Item GA4 Event edit_cart_item Ecomm - Edit Cart Item

Once you've created your tags and triggers for all of your events, click the 'Submit' button to publish your events and begin collecting data.

For questions about configuring GA4 or assistance with setting up any triggers or tags, please get in touch with our Support Team at support@bbot.menu.