Using Google Tag Manager in the Checkout

Nicolas Audet
Nicolas Audet
  • Updated

Overview

Google Tag Manager (GTM) is a free tool that simplifies the process of managing and deploying marketing tags on your checkout without requiring developers to modify the code. With GTM, you can add, update, and test tags like Google Analytics, Meta Pixel, or custom scripts.

gaiia offers a GTM integration that will embed your desired container in the checkout, allowing you to track visitors, events and orders.

Instructions

Step 1: Find your container ID

  1. If you don’t already have a container, refer to the official GTM doc to create and setup your container: Tag Manager Help
  2. Once the container has been created, take note of the container ID (which starts with 'GTM')

Tag_manager.png

Step 2: Setup the GTM integration in gaiia

  1. In gaiia, navigate to Settings → Integrations → App directory tab → Google Tag Manager → Install
  2. From the “Connect Google Tag Manager” screen, enter your container ID in the field
  3. Click Connect

Once connected, your container will be embedded on the checkout, and you will be able to inject tracking scripts that listen to the events pushed on the data layer and track them in your own systems.

Be cautious about third-party and custom scripts you include in your container, as invalid and misconfigured scripts can have undesired effects on your checkout. You are responsible for the scripts you embed and their effects.

Object structure

The events will be pushed to the window.dataLayer object with the following structure:

{
  event: 'event.name',
  orderId: 'xxxx-xxxx-xxxx-xxxx',
  orderMetadata: {
    urlParams: {
      fbclid: 'value',
      anotherGetParam: 'value'
    },
  },
  currentStep: 'CHECKOUT_STEP_IDENTIFIER',
  cart: {
    internetPlan: {
      id: 'product-version-id',
      name: 'Displayed product name',
      slug: 'product-slug',
      currency: 'USD',
      isRecurring: true,
      isProductTaxInclusive: false,
      priceInCents: 8500,
      priceWithTaxesInCents: 8700,
      displayedPriceInCents: 8500,
      downloadSpeedInKbps: 25000,
      uploadSpeedInKbps: 800
    },
    internetPlanActivationFee: {
      id: 'product-version-id',
      name: 'Displayed product name',
      slug: 'product-slug',
      currency: 'USD',
      isRecurring: true,
      priceInCents: 400
    },
    router: {
      id: 'product-version-id',
      name: 'Displayed product name',
      slug: 'product-slug',
      currency: 'USD',
      isRecurring: true,
      isProductTaxInclusive: false,
      priceInCents: 8500,
      priceWithTaxesInCents: 8700,
      displayedPriceInCents: 8500,
    }
    residentialPhonePlan: {
      id: 'product-version-id',
      name: 'Displayed product name',
      slug: 'product-slug',
      currency: 'USD',
      isRecurring: true,
      isProductTaxInclusive: false,
      priceInCents: 8500,
      priceWithTaxesInCents: 8700,
      displayedPriceInCents: 8500,
    },
    mobilePhonePlan: {
      id: 'product-version-id',
      name: 'Displayed product name',
      slug: 'product-slug',
      currency: 'USD',
      isRecurring: true,
      isProductTaxInclusive: false,
      priceInCents: 8500,
      priceWithTaxesInCents: 8700,
      displayedPriceInCents: 8500,
    }
  },
  monthlySubtotalInCents: 80000,
  monthlyTotalInCents: 90000
}
  • event - the event name, described in the list below,

  • orderId - once the order ID is generated (starting at the start checkout/email capture step), this will be populated with the order UUID. will be undefined otherwise, and will be appended on all events.

  • orderMetadata.urlParams - object with the URL parameters the checkout was invoked with. It will be appended to all events.

  • currentStep - identifier of the checkout step the event was fired on. Will not be appended to all events. Can be one of those values:

    PLAN_SERVICE_ADDRESS
    PLAN_INTERNET_PLAN_SELECTION
    PLAN_ADDITIONAL_SERVICES_SELECTION
    SETUP_START_CHECKOUT
    SETUP_ROUTER_SELECTION
    SETUP_ACTIVATION_DATE
    CHECKOUT_PERSONAL_INFORMATION
    CHECKOUT_PAYMENT_DETAILS
    REVIEW_CONFIRMATION
    SUCCESS_CLIENT_PORTAL_SIGNUP
    
  • cartdetails of the selected products. It will not be appended to all events.

    • id - ID of the product-version
    • slug + name - slug/name of the product
    • currency - currency code for the product
    • isRecurring - true if the product is to be billed recurring, false if it's one-time
    • isProductTaxInclusive - true if the price is to be displayed with the tax included, false if it's displayed with the tax excluded
    • priceInCents - price for the product, in cents
    • priceWithTaxesInCents - price + applicable taxes for the product, in cents
    • displayedPriceInCents - equal to priceInCents if the product is tax-exclusive or priceWithTaxesInCents if inclusive
    • uploadSpeedInKbps / downloadSpeedInKbps - for internet plans only
  • monthlySubtotalInCents / monthlyTotalInCents - monthly total before and after taxes. It will not be appended to all events.

Events

Event Event Description
address.serviceable Pushed when the product availability query returned products, meaning the lead is qualified/eligible. Won't include the cart and totals.
address - the address that was provided
address.unserviceable.submit_email Pushed when the prospect leaves its email for follow-up on the unserviceable address form. Won't include the cart and totals.
unserviceableAddressId - ID of the unserviceable address entity that had the email appended
broadband_facts_labels.open_side_panel Pushed when the side-panel with broadband facts is opened.
broadband_facts_labels.select Pushed when an internet plan is selected in the side panel.
id - ID of the broadband facts label
plan - name of the plan, as displayed in the list
broadband_facts_labels.view_page Pushed when a broadband facts label is viewed on the dedicated page via a permalink. Won't include the cart, totals, orderId, or current step.
id - ID of the broadband facts label
plan - service plan name field of the label
internetPlan.select Pushed when the internet plan selection is changed on the internet plan step.
internetPlan - same format as the cart.internetPlan key described above
step.change Pushed when the checkout changes steps. Won't include the current step.
from - identifier of the previous step
to - identifier of the step that was changed to
step.first_time_complete Pushed whenever the checkout changes step, resulting in the previous step being completed for the first time. Won't include the current step.
step - identifier of the step
step.back Pushed whenever the user goes back a step. Won't include the current step.
from - identifier of the current step
to - identifier of the step that was changed to
router.select Pushed when the internet plan selection is changed on the router step.
router - same format as the cart.router key described above
order.resume Pushed when the order is resumed from an order resume link.
orderId - ID of the order that was resumed
order.submit Pushed when the order is successfully submitted.
order_summary.open_side_panel Pushed when the side panel for the cart and totals is opened.
payment_method.add Pushed when a payment method is added in the billing details step.
type - always credit_card
authorizeAutomaticPayments - true if the auto payment checkbox was checked, false otherwise
payment_method.clear Pushed when the payment method is cleared from the billing details step.

 

Was this article helpful?

Have more questions? Submit a request