coopergarry/shopify-tracker

Littledata's tracking script for Shopify stores

Shopify Tracker

Littledata's tracking script for Shopify stores.

Shopify apps

This script is used by two Littledata apps:

• Google Analytics by Littledata (source code)

• Segment.com by Littedata (source code)

There is also an extra tracker for our Carthook checkout connection (source code)

Latest version

The latest minified versions of these scripts are hosted on a CDN:

• https://master-shopify-tracker.s3.amazonaws.com/gaTracker.js

• https://master-shopify-tracker.s3.amazonaws.com/segmentTracker.js

You can find which version your browser has loaded by looking at window.LittledataScriptVersion variable.

Note: Older installs may have the script loaded from the /dist folder via jsdelivr CDN. This /dist folder stopped getting updates after version 11.1

Dependencies

These scripts rely on the LittledataLayer window-scope variable generated by a snippet in the Shopify store theme, and imported into the store's active layout.

The Google Analytics script iniatialises Google's gtag library on the page, so gtag('event', 'event_action') commands will queue for sending.

The Segment script iniatialises Segment's Analytics.js library on the page, so analytics.track('Event action') commands will queue for sending.

Testing for Littledata engineers

To test the tracking script locally read this guide.

Configuration

The following fields of the LittledataLayer object allow for configuration of tracking features:

For both Segment and Google Analytics

debug

Debug mode adds extra console logs to track how the script is performing.

Deafult: undefined (boolean)

respectUserTrackingConsent

This tracking script can automatically integrate with Shopify's Customer Privacy API or OneTrust's CookiePro. When respectUserTrackingConsent is true, the script will wait for customer's to opt in to performance cookies before initialising the third-party tracking scripts or sending any pageviews and events.

Default: undefined (boolean)

productClicks

By default our tracking code briefly interrupts a click on a product in a product list, in order to send the tracking event before the page reloads. If this is interfering with other apps or scripts you can turn off product list click tracking.

Default: true (boolean)

productPageClicks

By default we track clicks on product images and social share buttons on the product details page. If this doesn't work with your theme you can opt out by setting this field to false.

Default: true (boolean)

hideBranding

Our app generates a branded message in the site console log. You can disable this.

Default: false (boolean)

doNotTrackReplaceState

For some themes, where the URL changes (e.g. a new variant) without a new page load our script will track a new page view. Change this setting to true to disable a new page view on history.replaceState() via browser History API

Default: undefined (boolean)

productListsOnAnyPage

By default we only track product lists on collection and search pages. You can product list views and clicks on any page (e.g. 'recently viewed' list on the product details page) by setting this to true.

Default: false (boolean)

usePageTypeForListName

Littledata's tracking script uses the document.location.pathname as the list name for list events. Setting usePageTypeForListName: true overrides this to use Shopify's page_type as the list name, which has fewer values and may be more helpful in reporting.

Default: undefined (boolean)

productListLinksHaveImages

We assume that a product list will consist of a list of links to product images OR a list of links with images in a sibling HTML element (i.e. both the <a> and <img> tag share the same parent element). If you need to track only links where the <img> tag is a child of the <a> tag set this to true.

Default: false (boolean)

productListLinksHavePrices

You can restrict the tracking of product list views and clicks to just those where the product price is also included in a link (although not necessarily the same anchor tag as the product imgage).

Default: undefined (boolean)

disablePageviews

This script triggers a pageview when the DOM is ready and the tab is visible. You can disable all pageviews with this setting.

Default: undefined (boolean)

disableClientSideEvents

This script triggers various events from the browser. You can disable individual events with productClicks or productPageClicks, or disable all events with this setting.

Default: undefined (boolean)

Google Analytics configuration

referralExclusion

By default, a referral automatically triggers a new session in Google Analytics. When you exclude a referral source, traffic that arrives to your site from the excluded domain doesn’t trigger a new session. If a referring domain is matched by this regular expression the referring domain is ignored, and the pageview is counted as part of the same session. This is in addition to any referrers excluded in the GA property settings

Example: /paypal\.com/ (regex)

extraLinkerDomains

To enable cross-domain tracking on pages that your Shopify store links to (destination domains) you can add an extra array of domains to the data layer. You do not need to add domains here which only send traffic to your Shopify store (source domains) - by default this script will look for the linker URL parameters.

You will also need to enable the Google Analytics linker on those source or destination domains.

Example: ['mylandingpage.com'] (array)

googleAdsConversionIds

Add the Google Ads (AdWords) conversion IDs that you configured with Ads. This accepts an array of strings. Our script will automatically add this to gtag('config') command.

Example: ['AW-11111111', 'AW-22222222'] (array)

optimizeId

This is where to add the Google Optimize container ID that you want to configure with gtag. Our script will automatically add this to gtag('config') command.

Example: GTM-123ABC (string)

anonymizeIp

This field to instructs the gtag library to mask the last 3 numbers of the user's IP address, to support greater user privacy at the expense of some geo-location accuracy.

Default: true (boolean)

googleSignals

This field opts your site into using Google Signals, to enable more powerful demographic reports and cross-device tracking using the Google Ads cookie. You need to check this is compatible with your website terms of use.

Default: true (boolean)

MPEndpoint

If you wish to duplicate the Measurement Protocol hits sent to Google Analytics to a custom collection endpoint of your choosing, add it here.

Example: https://collector.littledata.io/collect (string)

cookieUpdate

This passes on the cookie_update field to gtag. A common use is when the _ga cookie was overwritten as server-side cookie to preserve it.

Default: true (boolean)

Segment configuration

cookiesToTrack

Grab the values from an array of named cookies and pass them as traits on Segment identify calls.

Example: ['iterableEmailCampaignId', 'iterableTemplateId'] (array)

CDNForAnalyticsJS

If you have a proxy CDN setup, redirecting to https://cdn.segment.com, to load Segment's AnalyticsJS library from your own domain you can specify it here. It must include the full domain, with no trailing slash.

Default: https://cdn.segment.com (string)

segmentUserId

You can choose an identifier to use for logged-in users.WARNING: this must match what is configured for server-side events in Littledata's app settings.

Possible values: none, shopifyCustomerId, email, md5EmailHash Default: shopifyCustomerId (string)