Analytics

An Analytics Integration is how you can send completed transactions data into the reporting system of your analytics provider. Having the transaction data within your reports helps you to measure sales against other metrics like site traffic and advertising campaigns.

Commerce has built-in support for the most widely use analytics provider Google Analyticsopen in new window directly and via Google Tag Manageropen in new window.

If you use a different analytics provider, or have more complex requirements, the transaction data can be provided to your reports by having a web developer perform a Custom Integration.

The instructions below will guide you through connecting using the method of your choice.

Google Analytics

Google Analytics is a reporting tool that tracks visits on your website and provides insights into what is occurring, it helps you to make informed decisions regarding your site.

If you do not already have a Google Analytics account, you can create one by following Google's Documentationopen in new window.

Integration with Google Analytics requires three primary steps:

  1. Ensure that you have the Google Analytics Tracking Code on your site.

  2. Turn on Enable Ecommerce in Google Analytics.

  3. Turn on Google Analytics in Commerce.

TIP

The built-in Google Analytics support is intentionally simple. If your site has more complex requirements (e.g. multiple codes/properties), you should leverage a Custom Integration.

Tracking Code

The Tracking Code is how Google Analytics is able to register site visits and send that information back to their reporting systems.

Commerce supports the following tracking codes and will automatically determine which one is installed on your site:

  • gtag.js
    The Global Site Tag code is Google's latest & recommended tracking code system.

  • analytics.js
    The Universal Analytics code is Google's previous tracking code system.

  • ga.js
    The Legacy code is the oldest supported version of Google's tracking code system.

Enable Ecommerce

Google Analytics does not display Ecommerce reports by default, so you'll need to enable it in the settings.

To Enable Ecommerce:

  1. Log in to your Google Analytics account and navigate to the Admin area.

    Google Analytics Setup 1

  2. Select the Ecommerce Settings option.

    Google Analytics Setup 2

  3. Turn on the Enable Ecommerce switch.

    Google Analytics Setup 2

  4. Press Save.

Enable Google Analytics

Commerce does not send transaction data by default, so you'll need to enable it in the settings.

To Enable Google Analytics:

  1. Log in to your Commerce account and navigate to ...

    TODO

    Add a screenshot

  2. Turn on the Google Analytics switch.

    TODO

    Add a screenshot

CONGRATULATIONS

🎉 You have now completed the connection between Commerce and Google Analytics.

Google Tag Manager

Google Tag Manager (GTM) is a separate Google product used to add tags to your site and direct the flow of data without the need for source code changes.

It is a flexible system that requires more configuration, so it is best suited to advanced requirements.

WARNING

These instructions only outline integrating Commerce transaction data into Google Analytics via GTM. For additional information on using GTM please seek other documentationopen in new window.

Integration with Google Tag Manager requires five primary steps:

  1. Turn on the Enable Ecommerce switch in Google Analytics.

  2. Add a Variable in GTM containing your Google Analytics account settings.

  3. Add a Trigger in GTM to listen for the Transaction event sent by Commerce.

  4. Add a Tag in GTM to listen for the Trigger and submit the details to Google Analytics.

  5. Enable the Google Analytics - gtm.js integration in Commerce.

Add GTM Variable

Add your Google Analytics settings into a Variable for easy use elsewhere in GTM.

  1. Open GTM, navigate to the Variables section and press the New button.

    GTM Variable 1

  2. Name the Variable, then click on Variable Configuration.

    GTM Variable 2

  3. Scroll down the options to find the Google Analytics Settings item and select it.

    GTM Variable 3

  4. Insert your Google Analytics tracking code, (press the ? button for help if you do not know it).

    GTM Variable 4

  5. Press Save.

    GTM Variable 5

Add GTM Trigger

The Trigger listens for the Transaction event being sent by Commerce.

  1. Navigate to the Triggers section in GTM and press the New button.

    GTM Trigger 1

  2. Name the Trigger, then click on Trigger Configuration.

    GTM Trigger 2

  3. Scroll down the options to find Custom Event and select it.

    GTM Trigger 3

  4. Set the Event Name to transaction.

    GTM Trigger 4

  5. Set This trigger fires on to Some Custom Events.

    GTM Trigger 5

  6. Set the Fire this trigger... conditions to Event equals transaction.

    GTM Trigger 6

  7. Press Save.

    GTM Trigger 7

Add GTM Tag

The Tag associates the Trigger with your Google Analytics account using the Variable.

  1. Navigate to the Tags section in GTM and press the New button.

    GTM Tag 1

  2. Name the Tag, then click on Tag Configuration.

    GTM Tag 2

  3. Find the Google Analytics - Universal Analytics option and select it.

    GTM Tag 3

  4. Set the Track Type to Transaction.

    GTM Tag 4

  5. Set the Google Analytics Settings to the Variable created earlier.

    GTM Tag 5

  6. Select Triggering.

    GTM Tag 6

  7. Select the Transaction Trigger created earlier.

    GTM Tag 7

  8. Press Save.

    GTM Tag 8

  9. Remember to Submit your GTM Container to publish it.

    GTM Tag 9

  10. Add GTM Container details and press Publish.

GTM Tag 10

CONGRATULATIONS

🎉 You have now completed the connection between Commerce, GTM and Google Analytics.

Custom Integration

It is possible to integrate Commerce with any analytics provider by listening for the transaction.complete event and handling the result yourself.

This is best implemented by a developer that understands both the data that we provide and the API of the Analytics system that you wish to integrate with.

NOTE

Ensure you follow best practices and do not pass any personally identifiable information into your analytics provider or any other system.

To manually handle the data from a completed transaction attach a listener using the following code:

// Ensures Commerce is available
document.addEventListener( 'commerce.ready', function () {

  // Listens for the completed transaction
  commerce.subscribe( 'transaction.complete', function ( event ) {
    // You now have access to the data via event.data
    console.log( event.data )
  } );
} )

The event has the following format:

{
  data: {
    invoice: { ... }, // The invoice response
    message: 'Thank you for your purchase. ...',
    order: { ... } // The order that was processed
  }
}