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.ymlfile with agoogle_tag_manager_idandgoogle_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