Add GTM enhanced ecommerce transaction event to checkout
What does this MR do and why?
This is a follow-up MR to !78727 (merged).
Once we merge it, it will close out gitlab-com/marketing/digital-experience/buyer-experience#271 (closed).
This MR is intended to implement the transaction
event in Google Tag Manager's enhanced ecommerce tool. It does a few things to that effect:
- Adds a
trackTransaction
function in the Google Tag Manager functions, specifically to track the enhanced ecommercetransaction
event. - Abstracts out a function for creating product information to pass to enhanced ecommerce, in
generateProductInfo
- Calls
trackTransaction
in the successfulthen
clause forApi.confirmOrder()
in the new subscriptions Vuex actions (similar to how we added tracking to Vuex actions in !78727 (merged)). - I added Jest specs to cover the
trackTransaction
function, and modified existing specs using Paul's patch from a non-blocking comment in !78727 (merged)
Screenshots or screen recordings
This video is from !78727 (merged) and shows the basic idea, but only for the previous checkout
action. I have been trying to get the Zuora form to load for the last week or so in my local GDK, but for the life of me, I cannot. I paired up with fulfillment engineers and we couldn't quite figure it out.
However, this MR is time-sensitive (the CMO, @cmestel
wants it to land by Friday, 2022-01-28). Instead of fiddling with Zuora for a few more days, I'm hoping whoever reviews this can verify for me that both the checkout
events and the transaction
events (as outlined in the last section of https://gitlab.com/groups/gitlab-com/marketing/digital-experience/-/uploads/f252fc80f1dd6799d19e4d57d6b4c239/Gitlab_GTM_DataLayer_Spec.pdf) fire. I made an educated guess on where I could hook into that flow, but I cannot verify locally myself.
I'm happy to pair up with someone who has a working checkout form and troubleshoot as needed.
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.
- Open tag assistant and point it to
localhost:3000/-/subscriptions/new?plan_id=2c92a00d76f0d5060176f2fb0a5029ff
, you should see the Premium plan selected, and you should be able to see events in thedataLayer
tab of tag assistant - Use the test credit card information to actually complete a transaction. The window location will change, but tag assistant should have registered an
EECtransactionSuccess
event.
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.