Skip to content

Add the Snowplow namespace ID to GTM enhanced ecommerce tracking

Tyler Williams requested to merge be-542/add-namespace-id-to-gtm into master

What does this MR do and why?

Describe in detail what your merge request does and why.

This MR closes https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/issues/542

The goal is to be able to join Google Tag Manager Enhanced Ecommerce transaction data with Snowplow data. To do that, this MR adds a utility in app/assets/javascripts/google_tag_manager/index.js to get the namespace ID from window.gl.snowplowStandardContext, if one is available, and it modifies the trackTransaction function to include that value in the product data.

Screenshots or screen recordings

I have opted not to make these because I don't have Zuora set up locally and I can't give you a good demonstration. However, I think the Jest specs I updated exercise this code change appropriately.

How to set up and validate locally

Unfortunately, I don't have a Zuora payment portal set up for my own local development environment, so I can't give you a full workflow to validate, but here is what I expect should work:

  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. In gitlab.yml, add a your GTM ID in the extra block for both the google_tag_manager_id and google_tag_manager_nonce_id values. Make sure to restart GDK (or do this step prior to starting GDK) for settings to take effect.
    extra:
     google_tag_manager_id: 'GTM-YOURIDHERE'
     google_tag_manager_nonce_id: 'GTM-YOURIDHERE'
  3. Start or restart your GDK
  4. bundle exec rails -c to open the Rails console and enable some feature flags:
  5. Turn on Feature.enable(:combined_registration)
  6. Turn on Feature.enable(:gitlab_gtm_datalayer)
  7. Open the Google Tag Assistant
  8. Visit http://localhost:3000 from the Tag Assistant
  9. On your local server, purchase a premium or ultimate plan at /-/subscriptions/new. Check the Data Layer tab in the Google Tag Assistant after the transaction processes, and you should see a value in the product data that matches dimension36: your namespace variable.

You can compare that value to the value you get from window.gl.snowplowStandardContext.data.namespace_id if you were to run that in the console from localohost:3000/-/subscriptions/new. They should match.

You can also mess around with these values in the Jest spec by modifying values and running yarn jest spec/frontend/google_tag_manager/index_spec.js --watch to see how this utility will function in different circumstances.

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