BunStackDocs
Contents

Storefronts

Tracking and Google Tag Manager

The storefront's GTM container, the ecommerce events in dataLayer, one purchase per order, consent, the page address and the tags in GTM.

Last updated · 6 min read

The storefront sends ecommerce events to Google Tag Manager.

Where: The Google Tag Manager card under Storefronts › [storefront] › Analytics.

Add the container

  1. Open Storefronts › [storefront] › Analytics.
  2. Type the ID in Container ID, for example GTM-AB12CD3.
  3. Press Save.

Empty the field and press Remove to remove the container.

RuleValue
FormatGTM- followed by 4–12 capitals or digits
LoadsOn every page of the storefront, including the checkout and the order pages, after "Accept all"
Consent Mode"Denied" before the choice, "granted" after "Accept all"
The same container under Code › HEAD · SITEDoes not load twice
Copy of the storefrontDoes not take the ID
RoleA role that may edit the storefront
MessageCauseDo this
That is a Google Analytics measurement ID (G-…).You typed a GA4 measurement IDType the container's ID. Put the GA4 tag inside the container
Enter only the container ID, for example GTM-AB12CD3, not the snippet.You pasted the whole GTM codeType the ID only
A container ID is GTM- followed by 4 to 12 letters or digits, for example GTM-AB12CD3.Wrong formatCheck the ID in GTM

The events

The storefront sends 4 events to window.dataLayer in GA4's ecommerce format. Before each event it sends { ecommerce: null }.

EventWhenContents
view_itemA product page showsThe variant the page opens on (the first that can be bought), price and currency
add_to_cartSomething goes in the cart: on the product page, from a card or with a button of your ownThe line, quantity, value and currency
begin_checkoutThe checkout opens with a cartThe cart's lines, value and currency. Once per cart and tab. A reload with the same cart sends nothing new
purchaseThe order confirmation after paymenttransaction_id (the order number), value, tax, shipping, currency and the order's lines
FieldContents
item_idThe same id as the item's g:id in the storefront's Google feed, as set under Item id (g:id) and Id prefix on Feeds. With BunStack ids it is the variant's id, or the product's id for a product without variants. Google Ads remarketing then matches the feed. See Product feeds for Google and Meta
item_name, item_variant, item_categoryThe product's name, the variant's name and the product's first category
price on view_item, add_to_cart, begin_checkoutThe price shown in the storefront, in the visitor's currency
value on purchaseWhat the customer pays, with VAT and shipping. tax and shipping are sent beside it, so a tag can subtract them
price on the lines in purchaseThe unit price after the line's discount. discount is the discount per unit

Note: A card or an add-on adds the product's only variant to the cart. item_id then matches the variant's row in the feed too. When the product has several variants, the card opens the product page, where the customer chooses.

One exception applies with SKU and Imported product id. When two items have the same SKU, the feed sends the second with its BunStack id, because g:id must be unique. The events send the SKU for both. Give every variant its own SKU.

One purchase per order

The storefront sends purchase once per order, when all conditions hold:

  • The checkout was completed in the same browser, within a day.
  • Kustom has approved the order or captured the money.
  • The visitor has chosen "Accept all".

The storefront sends no purchase when the customer reloads the confirmation, opens the link in the order email, looks up the order or switches device. It also sends none for a test order from the built-in checkout, or for a cancelled or refunded order.

The browser saves the id and time of the 50 latest orders, and which cart the latest begin_checkout was for. It saves both only after "Accept all". See Cookies and consent.

What the events do not contain

No email address, no name, no address, no customer id, no order key and no discount code. A discount code can be meant for one customer only. That is why it is not in the events.

The page address

GA4 sends the page address (page_location) with every event. Other tags read it too.

  • The order key is not in the address. When the link in the order email is opened, the storefront removes the key from the address before the page loads.
  • The discount code is not in the address. The cart hands the code to the checkout (/checkout) in the tab. A link with ?code=…, for example in a newsletter, still works: the storefront moves the code into the tab before the container loads.

Still set GTM to remove query strings on pages under /orders, so that no other parameter there reaches your analytics.

Nothing goes to dataLayer before the visitor has chosen "Accept all" in the storefront.

  • If the visitor accepts on a product page, the storefront sends view_item for that page afterwards.
  • When the visitor chooses "Only necessary", the storefront sends nothing, not even what was waiting.
  • The checkout and the order pages show no banner. There, the storefront sends events only if the visitor has already accepted.

Set up the tags in GTM

  1. GA4: add a Google tag with your measurement ID. Add a GA4 event tag with the event name {{Event}}. Trigger it with a custom event that matches view_item|add_to_cart|begin_checkout|purchase as a regular expression. Turn on sending ecommerce data from dataLayer.
  2. Google Ads: add a conversion tag triggered by the custom event purchase. Value: the dataLayer variable ecommerce.value. Transaction ID: ecommerce.transaction_id. Currency: ecommerce.currency.
  3. Check with Preview in GTM. Open the storefront, choose "Accept all", open a product, add it to the cart, open the checkout and make a purchase. Each step should show once.

The storefront's script policy lets through Google's hosts for GTM, GA4, Google Ads and GTM's preview. The storefront stops a tag that loads scripts from another vendor when the host is not among the allowed hosts.