GTM and Google Analytics data layer for Shopify

Littledata’s Google Analytics tracking adds lots of detailed customer events which you can use to build funnels, reports or segments in Google Analytics.

However, you may want to use the same events to trigger other marketing tags in Google Tag Manager (GTM), or to add your own events on top of our standard event tracking.

Littledata follows the naming conventions set by Google for gtag, which should make extending our tracking easy.

Adding additional events for Google Analytics

Littledata's app embed already loads the gtag.js library onto all the pages of the Shopify store.

You don't need to wait for this library to load before calling gtag - the event queue will take care of that.

For example, if you want to track the click of a navigation button you can add this tag to Google Tag Manager.

gtag('track', 'nav_button_click')

You can also add extra parameters to the event in Google Analytics like this:

gtag('track', 'promo_click', {
  'promo_name': 'BIG BANNER',
  'promo_location': 'HOMEPAGE'
})

Additional events for Segment

In a similar way, Littledata's Segment app loads Segment's Analytics.js library onto all pages. All Segment Enhanced Ecommerce events are tracked by default, but you could use the analytics command to track extra events.

Using the same example above, like this:

analytics.track('nav_button_click')

Using GTM data layer for other marketing tags

You can also use our standard data layer to trigger other marketing tags from GTM.

Definitions

• Littledata Layer: the field name in the LittledataLayer window-scope variable which you can access as a JavaScript variable in GTM.
• GA event: the name of the Event which you can report on in Google Analytics
• GTM event: the name of the event field pushed to the GTM dataLayer, which can be used for a custom trigger in GTM.
• GTM variables: the other properties accessible at the time of this event as a user-defined Data Layer Variable in GTM.

All pages

GTM event: pageview

GA event: page_view 

GTM variables: page_title, page_location

Pageviews are only sent when the page is actually rendered for the user. So if the page is loaded in the background, on a hidden tab, or the user closes the browser tag before the page renders, a pageview will not be triggered.

If a customer is logged in

Littledata Layer: customer (only available when a customer is logged in)

{
  ...
  customer: {
    id: '1234', // same as Shopify customer ID
    name: 'John Smith',
    email: 'john@smith.com',
    phone: '+442083508061'
  }
}

Viewing a product in the list

GTM event: view_item_list

GA event: view_item_list

GTM variables: ecommerce.impressions (i.e. products, see Product Item below),

View item events are only sent when more than 80% of the product image becomes visible on the user's screen. So as the user scrolls down the page, events will be sent in batches containing the items in the row that becomes visible.

Clicking on a product in the list

GTM event: select_content

GA action: select_item

GTM variables: ecommerce.click.products

Not all click events will have time to trigger tags before the page redirects. We don't take the risk of delaying redirects to wait for tags to fire.

Product details page

GTM event: view_item

GA event: view_item

GTM variables: ecommerce.details.products (a single product),

Each product contains the following fields:

• id (either the product ID or SKU)
• name
• price
• brand
• category
• handle (for product details and listing events only)
• variant
• shopify_product_id
• shopify_variant_id
• compare_at_price
• image_url

Clicks on product image

GTM event: product_image_click

GA event: select_content

Parameters:

• name (Image ID)
• image_url

Social share

GTM event: share_product

GA event: share

Parameters:

• network (Social network)