Enhanced Ecommerce tracking in Google Tag Manager

Google Tag Manager (GTM) exists to help you load your Google Analytics (GA) and any other arbitrary JavaScript or HTML tags in the same “container”.

Google Analytics also has an Ecommerce reporting feature, designed to mimic a system where items are added to a cart and then the cart is checked out. We have configured ActionTag to fire Ecommerce events on successful contribution and event form submissions. In the case of a contribution form submission, only a single item will appear in the cart for a transaction. In the case of an event ticket purchase, multiple items can will in the transaction if different ticket types are purchased by the supporter.

If you are using Google Tag Manager with Google Analytics on the same site where you embed ActionTag, and you enable Google Analytics Ecommerce collection in both Google Analytics and Google Tag Manager, the Ecommerce data should pass to the appropriate Google Analytics Ecommerce reports with the following configuration steps.

  1. Ensure that Google Tag Manager is installed on your online form, as follows:
    1. In Online Actions: Provide your Google Account ID Number on Step 1 of the Form Builder.
    2. In NGP: Embed the Google Tag Manager source in the body on your form.
    3. If you are embedding ActionTag on your site, you can install a new GTM container on your site or utilize an existing GTM container.
  2. In Google Analytics, navigate to the property that will be utilized for tracking enhanced Ecommerce. For each view that requires Ecommerce, navigate to the view settings, ‘Ecommerce Settings’, and Enable Ecommerce. Ensure that Enhanced Ecommerce Reporting has been enabled as well.
  3. In Google Tag Manager, create a Custom Event trigger type that is set to fire on all custom events with the event name: transaction.
  4. Now create a Universal Analytics tag in Google Tag Manager with type “Page View”. Typically Google Tag Manager is used to house a Google Analytics tag to track page views. You can track your Ecommerce data to this same web property. Set the Tracking ID to the same property that tracks pageviews.
  5. While configuring the tag, click “More Settings” and expand “Fields to Set.” In the “Field Name” section enter in “nonInteraction” (case sensitive), and in “Value” enter in “true.” This step ensures that pageviews are not double-counted when form events fire.
  6. Also under “More settings”, expand “Ecommerce” and click the checkbox for “Enable Enhanced Ecommerce Features” as well as the “Use data layer” checkbox.
  7. Once your tag has been configured, trigger the tag using the transaction Event trigger created earlier.
  8. Use the preview setting in the GTM container to look at one of your forms to debug and confirm the integration is enabled successfully. Do this by submitting a form and watching (in the Google Tag Manager debugger) for the Ecommerce tag to fire successfully.
  9. Via the Data Layer tab in the debugger, inspect the data layer to make sure that the correct information has been passed.
  10. Verify that your data appears in the Google Analytics Ecommerce section. Note that it may take up to 24 hours for your data to appear.
  11. Publish the container and ensure that it appears on all pages where ActionTag is present.

Google Tag Manager utilizes a DataLayer in which information is stored in a JavaScript array and sent to the GTM container. The following code snippet is an example of data that would be passed into the GTM DataLayer upon a successful contribution form submission.

dataLayer = [{

  /* Triggering Event */
  'event': 'transaction',

  'ecommerce': {
    'purchase': {
      'actionField': {
        /* Online Ref # (can be used to search for transaction) */
        'id': '25970195',

        /* Denoting a Transaction from ActionTag */
        'affiliation': 'NGPVAN',

        /* Total Transaction Revenue */
        'revenue': '2600.00'
      },

      'products': [
        {
        /**
         * ID based upon unique session ID, combined with the
         * individual product transaction.
         * This value does not remain staticly assigned to the item for 
         * future purchases or for purchases by other users;
         * it is unique to the session)
         */
          'id': 'People for Good_4_713_2600.00',

          /* Unit Price (Contribution Amount) */
          'price': '2600.00',

          /* Organization Name */
          'brand': 'People for Good',

          /* Form Type */
          'category': 'ContributionForm',

          /* Count of Items */
          'quantity': 1,

          /* Selected Product */
          'name': 'People for Good_4_713_2600.00'
        }
      ]
    }
  }]
}];

The following code snippet is an example of data that would be passed into the GTM DataLayer upon successful client-side form submission, for an event with multiple tickets.

dataLayer = [{

  /* Triggering Event */
  'event': 'transaction',

  'ecommerce': {
    'purchase': {
      'actionField': {
        /* Online Ref # (can be used to search for transaction) */
        'id': '25970195',

        /* Denoting a Transaction from ActionTag */
        'affiliation': 'NGPVAN',

        /* Total Transaction Revenue */
        'revenue': '200.00'
      },

      'products': [
        {
        /**
         * ID based upon unique session ID, combined with the
         * individual product transaction.
         * This value does not remain staticly assigned to the item for 
         * future purchases or for purchases by other users;
         * it is unique to the session)
         */
          'id': 'People for Good_4_713_40.00',

          /* Unit Price  */
          'price': '40.00',

          /* Organization Name as it Appears */
          'brand': 'People for Good',

          /* Form Type */
          'category': 'EventForm',

          /* Number of Tickets of this Type Purchased */
          'quantity': 1,

          /* Selected Value or Ticket Name */
          'name': 'Gala Silver Ticket'
        },
        {
            'id': 'People for Good_4_713_80.00',

            /* Unit Price */
            'price': '80.00',

            /* Organization Name as it Appears */
            'brand': 'People for Good',

            /* Form Type */
            'category': 'EventForm',

            /* Number of Tickets of this Type Purchased */
            'quantity': 2,

            /* Selected Value or Ticket Name */
            'name': 'Gala Gold Ticket'
        }
        ]
      }
    }]
  }];

For more information on Google Tag Manager usage: