Skip to content

Add checkout event to Google Tag Manager on new subscription form

What does this MR do and why?

Closes gitlab-com/marketing/digital-experience/buyer-experience#269 (closed) by adding an enhanced ecommerce checkout event in Google Tag Manager on the new subscriptions forms.

Screenshots or screen recordings

video1104443208

How to set up and validate locally

  1. Create a Google Tag Manager account and container ID. You should just need to follow the step 1 of the instructions. The GTM container can be empty - it just needs to exist.
  2. Update your gitlab.yml file with a google_tag_manager_id and google_tag_manager_nonce_id:
      extra:
        google_tag_manager_id: 'GTM-YOURIDHERE'
        google_tag_manager_nonce_id: 'GTM-YOURIDHERE'
  3. Start the GDK: gdk start
  4. Enable the relevant settings and feature flags in Rails console:
    ApplicationSetting.first.update(check_namespace_plan: true)
    Feature.enable(:gitlab_gtm_datalayer)
    Feature.enable(:paid_signup_flow)
    Feature.enable(:gtm_nonce)
    Feature.enable(:ecomm_instrumentation)
  5. Sign in to your development environment.
  6. Go to localhost:3000/-/subscriptions/new?plan_id=2c92a00d76f0d5060176f2fb0a5029ff, you should see the Premium plan selected.
  7. In the console, check window.dataLayer. You should see a few different events. We care about two specific events: One will just have { ecommerce: null }, the other will have product information (see attached screen recording video).
  8. Repeat the last step, go to: localhost:3000/-/subscriptions/new?plan_id=2c92a0ff76f0d5250176f2f8c86f305a, you should see the Ultimate plan selected. Check for the same data in window.dataLayer.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Tyler Williams

Merge request reports