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
How to set up and validate locally
- 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.
- Update your
gitlab.yml
file with agoogle_tag_manager_id
andgoogle_tag_manager_nonce_id
:extra: google_tag_manager_id: 'GTM-YOURIDHERE' google_tag_manager_nonce_id: 'GTM-YOURIDHERE'
- Start the GDK:
gdk start
- 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)
- Sign in to your development environment.
- Go to
localhost:3000/-/subscriptions/new?plan_id=2c92a00d76f0d5060176f2fb0a5029ff
, you should see the Premium plan selected. - 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). - 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 inwindow.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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Tyler Williams