# GTM and Google Analytics data layer for Shopify

{% hint style="success" %}
Littledata maintains a GTM template in the [Tag Manager Template Gallery](https://tagmanager.google.com/gallery/#/owners/littledata/templates/gtm-variable) which you can use to more easily access ecommerce data in other GTM tags
{% endhint %}

Littledata’s [Google Analytics tracking](https://help.littledata.io/integrations/shopify-to-google-analytics/how-it-works-shopify-to-ga4) 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](https://developers.google.com/gtagjs/reference/event), which should make extending our tracking easy.

## Adding additional events for Google Analytics

Littledata's [app embed](https://help.littledata.io/advanced/developer/littledata-app-embed-how-it-works) 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'
})
```

{% hint style="success" %}
Littledata's script sends all events to Google Analytics by default. If you wish to disable the pre-checkout GA events, and send them yourself via GTM, you can change that [in the settings](https://help.littledata.io/advanced/developer/data-pipeline-settings).
{% endhint %}

## Additional events for Segment

In a similar way, Littledata's Segment app loads Segment's [Analytics.js library](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#track) onto all pages. All [Segment Enhanced Ecommerce events](https://github.com/littledata/helpcenter-content/blob/main/posts/segment-to-shopify-how-it-works/README.md#device-mode-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)*

```javascript
{
  ...
  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](https://help.littledata.io/advanced/developer/data-pipeline-settings))
* `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)

{% hint style="info" %}
All events from add to cart onwards are tracked only [server-side direct from Shopify](https://github.com/littledata/helpcenter-content/blob/main/posts/how-it-works-shopify-to-ga4/README.md#server-side-events). This ensures accuracy and speed for GA tracking, but means there is no GTM event on which to trigger your other tags.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.littledata.io/advanced/developer/gtm-and-google-analytics-data-layer-for-shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.