Add GTM enhanced ecommerce transaction event to checkout

Tyler Williamsrequested to merge
feature/add-transaction-event-for-enhanced-ecommerce into master

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:

  1. Adds a trackTransaction function in the Google Tag Manager functions, specifically to track the enhanced ecommerce transaction event.
  2. Abstracts out a function for creating product information to pass to enhanced ecommerce, in generateProductInfo
  3. Calls trackTransaction in the successful then clause for Api.confirmOrder() in the new subscriptions Vuex actions (similar to how we added tracking to Vuex actions in !78727 (merged)).
  4. 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.

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. 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 the dataLayer tab of tag assistant
  7. 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.

Merge request reports