All Collections
Insights
How can I use Google Tag Manager (GTM) to track customer actions on my website?
How can I use Google Tag Manager (GTM) to track customer actions on my website?

Track product impressions, clicks, add/remove from cart, checkouts and purchase events on your website with Meadow's GTM integration.

Updated over a week ago

You can learn how customers interact with your menu by using Google Tag Manager (GTM) to track how they navigate your site.

Which products are customers seeing when browsing my menu? Which products get the most clicks? Which products are most or least likely to be added to or removed from the cart?

With Meadow's GTM integration, you can track the following events:

  • Product Impressions: When a customer views your menu, all the products shown to them upon loading and scrolling will register product impressions.

  • Product Clicks: When a customer clicks on any product on the menu, that will register and record a product click.

  • Product Detail View: When a customer views a product (for example by clicking on it or navigating directly to it via a link), that will register an record a product detail event.

  • Cart Add: When a customer adds a product to their cart, that will register and record a card add event.

  • Cart Remove: When a customer removes a product from their cart they had previously added to the cart, that will register and record a card remove event.

  • Checkout: When the customer clicks the "Checkout" button, that will register and record a checkout event that shows all products in the cart at that time.

  • Purchase: When a customer completes a purchase, that will register and record a purchase event that shows all products in the order. The "id" field shows the Meadow order ID and "revenue" shows the order total.

NOTE: if you are not an experienced user of Google Analytics and Tag Manager, this can be extremely challenging to set up.

We can help set up GTM on your site, but be aware you may need professional assistance to set up Google Analytics to use the GTM data. Reach out in the help chat if you have any questions :)

Feeling Brave?

If you decide you really want to give it a go on your own, here are the steps to get started.

  • Step 1: Create or log into your Google Tag Manager account.

  • Step 2: Click the Create Account button.

  • Step 3: Enter an account name, container name and select "Web," then click "Create."

  • Step 4: Congrats, you've got an account! Now click "Install Google Tag Manager."

  • Step 5: You will now see the actual code you need to embed on your site in order to install GTM. This is where things can get a little tricky, since the next steps vary significantly, and depend on which service you use for your site. If you search in Google for "Install GTM on ____ site" you can find the instructions for your site (for example "Install Google Tag Manager on a Wordpress site," or Weebly, Squarespace, etc.).

  • Step 6: Once you've found and completed the instructions to add the code in Step 5 to your website, navigate to the "Workspace" for that account in GTM and click "Submit." Now your GTM integration should be active and you can use the "Preview" button to see it in action!

Here is the Preview in action: sweet success!

If you'd like to learn more on your own, a good place to start is Google's GTM Quick Start Guide (just keep in mind this is a resource for developers). There are also lots of great introductory videos out there like this one to help get you familiar with GTM.

Meadow's integration with GTM functions through the dataLayer concept. This construct is a simple JavaScript array that collects data for GTM. To set this up, you will need some understanding of GTM and the dataLayer.

Phew! Still with us? Here's what the events look like when recorded in GTM:

Product Impressions

{
gtm: {start: 1610476828083, uniqueEventId: 4},
event: 'meadow:product-impressions',
ecommerce: {
impressions: [
{
id: 15,
name: 'Marshmellows 12-Pack',
brand: 'Mellows',
price: 30,
category: 'Edibles',
variant: 'Box of 12',
list: 'Products List'
},
{
id: 758,
name: 'Kush Minntz',
brand: 'Minntz',
price: 65,
category: 'Flowers',
variant: 'Eighth',
list: 'Products List'
},
{
id: 623,
name: 'Durban Poison',
brand: 'Happy Day Farms',
price: 60,
category: 'Flowers',
variant: 'Eighth',
list: 'Products List'
},
{
id: 622,
name: 'Marshmellow - Single (METRC)',
brand: 'Mellows',
price: 6,
category: 'Edibles',
variant: 'Birthday Cake πŸŽ‚',
list: 'Products List'
},
{
id: 757,
name: 'Cereal Milk',
brand: 'Cookies',
price: 65,
category: 'Flowers',
variant: 'Eighth',
list: 'Products List'
}
]
}
}

Product Clicks

click: {
products: [
{
id: 756,
name: 'Red Congolese',
brand: 'Gold Seal',
price: 55,
category: 'Flowers',
variant: 'Eighth',
list: 'Products List'
}
]
}

Product Detail

detail: {
products: [
{
id: 756,
name: 'Red Congolese',
brand: 'Gold Seal',
price: 55,
category: 'Flowers',
variant: 'Eighth',
list: 'Products List'
}

Cart Add

add: {
products: [
{
id: 756,
name: 'Red Congolese',
brand: 'Gold Seal',
price: 55,
category: 'Flowers',
variant: 'Eighth',
list: 'Products List',
quantity: 1
}

Cart Remove

remove: {
products: [
{
id: 756,
name: 'Red Congolese',
brand: 'Gold Seal',
price: 55,
category: 'Flowers',
variant: 'Eighth',
list: 'Products List',
quantity: 1
}

Checkout

checkout: {
actionField: {step: 2},
products: [
{
id: 756,
name: 'Red Congolese',
brand: 'Gold Seal',
price: 55,
category: 'Flowers',
variant: 'Eighth',
list: 'Products List',
quantity: 1
},
{
id: 758,
name: 'Kush Minntz',
brand: 'Minntz',
price: 65,
category: 'Flowers',
variant: 'Eighth',
list: 'Products List',
quantity: 1
}

Purchase

purchase: {
actionField: {
id: '82851515',
affiliation: 'Meadow Embedded Menu',
revenue: 102,
tax: 4.86
},
products: [
{
id: 756,
name: 'Red Congolese',
brand: 'Gold Seal',
price: 55,
variant: 'Eighth',
list: 'Products List',
quantity: 1
},
{
id: 758,
name: 'Kush Minntz',
brand: 'Minntz',
price: 65,
variant: 'Eighth',
list: 'Products List',
quantity: 1
}

Did this answer your question?