Complete production implementation and QA of ecommerce templateset updates

[rachelhbd]

Code updates have now been deployed to the main and affiliate templatesets, so the next steps are

• [x] Alan to update GTM trigger conditions to accept events originating from act.350.org
• [x] Alan to put together some QA notes
• [x] QA - likely Julia and/or Rachel
• [ ] By 21 October, evaluate initial data to check it's as expected and see if there are any insights that can inform priorities for the November sprint

Let's set a target to get this done in the next week so that we can collect data throughout the rest of the month of October?

Also for ref: Documentation work in progress

[juliao762]

Point 1&2 by the end of Oct 5th Point 3 by Oct 11th

[alandmih]

Updating on progress:

• GTM updates published
• QA Notes to be prepped and added to this ticket today (10/6)

[alandmih]

Review & QA Notes

Google Tag Manager Configuration Review

• Visit GTM https://tagmanager.google.com/#/container/accounts/4702514756/containers/13424695/workspaces/130/folders
• Review “Ecommerce - development (archived)” folder. Confirm any Tags (2) are paused
• Review “Ecommerce” folder. Confirm the 5 Event Tags are associated with their accompanying Triggers. Confirm the Pageview - Product Details Tag is associated with the “product details pageview” Trigger

Analysis and Live Preview

• Visit GTM https://tagmanager.google.com/#/container/accounts/4702514756/containers/13424695/workspaces/130
• Click “Preview” button in top right of Admin Dashboard
• A new tab should open with Google Tag Assistant. A popup will prompt you for a URL to preview.
• Enter any valid AK donation page URL (EG: https://act.350.org/donate/web_join_redirect) and click Connect
• The donation page should open in a new tab
• On the Tag Assistant (GTA) window, press “Continue”
• Step through the donation flow and pause at the following steps to confirm that Tags are being fired as expected. Expected corresponding event in (parentheses)

1. (impression) Whenever a donation “ask” is presented in the frontend, an ”GA - Event - impression” Tag is triggered
2. (DOM Ready) Once the donation page has loaded, a “GA - Pageview - Product Details” Tag is triggered
3. (addToCart) Enter or click a donation amount, click Continue. Confirm “GA - Event - Add Cart” is triggered. Note: Either One-time or Monthly donation can be selected and should trigger the same event.
4. (checkout) Add Address info, click Continue. Confirm “GA - Event - Checkout” is triggered. Inspect Data Layer in GTA by clicking the checkout event and selecting the “Data Layer” tab. Look for “ecommerce.checkout.actionfield”. Confirm “step”=1
5. (checkout) Add credit card or Paypal Payment info, click Continue. “Confirm GA - Event - Checkout” is triggered. Inspect Data Layer in GTA by clicking the checkout event and selecting the “Data Layer” tab. Look for “ecommerce.checkout.actionfield”. Confirm “step”=2.
6. (impression) You should now be on the Thanks page. If there are additional donation asks here, confirm Impressions Tags are being triggered (similar to step 1).
7. (transaction) Confirm “GA - Event - Transaction” Tag has been triggered
8. Repeat the above steps for available variants for donation options. These may include: preset donation values vs custom value, one-time vs monthly frequency, credit card vs Paypal payment option; other currencies

Note - Events may also be monitored in realtime via Google Analytics.

1. Visit https://analytics.google.com/analytics/web/#/realtime/rt-event/a4147446w7993349p257453087/ a. note: if this direct link does not work, the navigation path is https://analytics.google.com/, select 350.org (Account) -> http://350.org/ (Properties & Apps) -> [WTR] Donations (Views), Realtime (in Reports menu) -> Events
2. Select “Events (Last 30 min)” filter above the main table
3. You should see the events you are triggering via your testing here. Further filter this table by clicking on an “Enhanced Ecommerce” Event Category entry in the table. All Events in this process aside from Pageview are under this category

[juliao762]

Google Tag Manager Configuration Review

• [x] Visit GTM https://tagmanager.google.com/#/container/accounts/4702514756/containers/13424695/workspaces/130/folders

• [ ] Review “Ecommerce - development (archived)” folder. Confirm any Tags (2) are paused

• [x] Review “Ecommerce” folder.

• [ ] Confirm the 5 Event Tags are associated with their accompanying Triggers.

• [x] Confirm the Pageview - Product Details Tag is associated with the “product details pageview” Trigger

Analysis and Live Preview

• [x] Visit GTM https://tagmanager.google.com/#/container/accounts/4702514756/containers/13424695/workspaces/130

• [x] Click “Preview” button in top right of Admin Dashboard

• [x] A new tab should open with Google Tag Assistant. A popup will prompt you for a URL to preview.

• [ ] Enter any valid AK donation page URL (EG: https://act.350.org/donate/web_join_redirect) and click Connect

• [x] The donation page should open in a new tab

• [x] On the Tag Assistant (GTA) window, press “Continue”

• [x] Step through the donation flow and pause at the following steps to confirm that Tags are being fired as expected. Expected corresponding event in (parentheses)

• [ ] (impression) Whenever a donation “ask” is presented in the frontend, an ”GA - Event - impression” Tag is triggered

• [x] (DOM Ready) Once the donation page has loaded, a “GA - Pageview - Product Details” Tag is triggered

• [x] (addToCart) Enter or click a donation amount, click Continue. Confirm “GA - Event - Add Cart” is triggered. Note: Either One-time or Monthly donation can be selected and should trigger the same event.

• [x] (checkout) Add Address info, click Continue. Confirm “GA - Event - Checkout” is triggered. Inspect Data Layer in GTA by clicking the checkout event and selecting the “Data Layer” tab. Look for “ecommerce.checkout.actionfield”. Confirm “step”=1

• [x] (checkout) Add credit card or Paypal Payment info, click Continue. “Confirm GA - Event - Checkout” is triggered. Inspect Data Layer in GTA by clicking the checkout event and selecting the “Data Layer” tab. Look for “ecommerce.checkout.actionfield”. Confirm “step”=2.

• [x] (impression) You should now be on the Thanks page. If there are additional donation asks here, confirm Impressions Tags are being triggered (similar to step 1).

• [x] (transaction) Confirm “GA - Event - Transaction” Tag has been triggered

Repeat the above steps for available variants for donation options. These may include:

• [x] preset donation values vs custom value
• [x] one-time vs monthly frequency
• [x] credit card vs Paypal payment option
• [x] other currencies

Note - Events may also be monitored in realtime via Google Analytics.

Visit https://analytics.google.com/analytics/web/#/realtime/rt-event/a4147446w7993349p257453087/

• [x] a. note: if this direct link does not work, the navigation path is https://analytics.google.com/, select 350.org (Account) -> http://350.org/ (Properties & Apps) -> [WTR] Donations (Views), Realtime (in Reports menu) -> Events

• [x] Select “Events (Last 30 min)” filter above the main table

• [x] You should see the events you are triggering via your testing here. Further filter this table by clicking on an “Enhanced Ecommerce” Event Category entry in the table. All Events in this process aside from Pageview are under this category

[juliao762]

Hey @alandmih I have done the QA process and there are few points:

• the number of tags in folders don't match (there is 1 in the archived, 6 in the final one)
• I can't make sense out of how product impressions are loaded (I think way to many?)
• Side question: do you know why is there so many (in hundreds) optimize.domChange events? It makes the QA process very difficult and doesn't seem right. I wrote some notes of what I have observed.

The rest looks fine to me!

Note: I have entered each time 350.org homepage as a page to preview and navigated to 2 different donation form from the homepage.

[juliao762]

Hey @alandmih! I think by a chance I have ended up doing some reverse QA on this project. I have a suspicion that we might be overcounting transactions / events actions = transactions on non-donation pages.

I wanted to explore where we ended up recording transactions on this experiment :

I ended up building a simple report in Data Studio to show me what event labels recorded transactions (so Enhanced Ecommerce Category, event Action = transaction) for this particular experiment.

What I ended up with was a list of donation and non donation action pages which recorded transactions:

Link: https://datastudio.google.com/reporting/fb298355-8d01-454e-8a70-a1d2ab5700a7/page/p_rwzmg2uwzc/edit

[juliao762]

I have just signed up this form: https://act.350.org/signup/eacop-week

and I see in fact that the GA Transaction event fires up:

[juliao762]

Could you please check what is causing the problem here?

[juliao762]

Maybe the referrer should be more strict and include only donation pages?

So referrer starts with: https://act.350.org/donate

[juliao762]

[alandmih]

Maybe the referrer should be more strict and include only donation pages?

So referrer starts with: https://act.350.org/donate

This would be effective for most cases, but an unfortunate issue with relying on the referrer value is that certain browsers - i think it was safari mainly - only respect the domain as the referrer, and discards of the rest of the path for that value.

[alandmih]

Could you please check what is causing the problem here?

Maybe the referrer should be more strict and include only donation pages?

So referrer starts with: https://act.350.org/donate

The current templateset essentially assumes that if you land on the Thanks page when coming from act.350.org, you've completed a donation transaction. We could set a condition on the tag that checks the Event Label and only records a donation transaction if the originating form contains /donate/. The transaction from your example has eventLabel: "/signup/eacop-week" which would get filtered out by such a condition.

[juliao762]

Thanks for explaining, @alandmih ! Would you add the changes to the triggers? (I would prefer to leave this to you at this point).

[alandmih]

Thanks for explaining, @alandmih ! Would you add the changes to the triggers? (I would prefer to leave this to you at this point).

@juliao762 I will add this today + do a bit of validation and report back here once done!

[alandmih]

Hi @juliao762 I updated the triggers and it appears to be working properly. However, I think there is actually a better way to handle this within the templateset thanks.html itself. I believe we can utilize the actionkit template tag {{ action.page.type }} to check if the action was a donation, and conditionally fire the transaction event itself based on that condition. In case you are curious, here is a list of the action page types.

I've left the simple modification to the triggers in GTM - not published. We can either push those to production for now, or we can hold off until we add and QA adding an {{ action.page.type }} == "donation" condition inside the thanks page. Just let me know your preference and I can proceed accordingly!

Here's a simple validation of the GTM trigger update being properly not-fired on the signup page, but fired on a donation page:

[juliao762]

Hey @alandmih, I think I prefer to handle this within the templateset thanks.html itself.

Do you think I should go ahead with the changes in GTM anyway?

[juliao762]

There is one thing that I have discovered today, though. The ecommerce events get triggered on the non-donation events as well (ex. the check-out); The data shows 0 for check-outs, but the product name = donation for some of the petition pages; Do you know why?

[juliao762]

hey @alandmih regarding DOM change keep loading, it is connected to running an experiment on Google Optimize, I just checked it today on 350.org/get-involved where we have a running experiment:

[alandmih]

hey @alandmih regarding DOM change keep loading, it is connected to running an experiment on Google Optimize, I just checked it today on 350.org/get-involved where we have a running experiment:

-makes sense, thanks for investigating! Should we end that experiment or is there still useful info to gather from it?

Also @juliao762, do you think there are any other issues to address here now that the "restrict transaction events to donation pages only" code has been added, before we can close this ticket out? Perhaps one item to follow up on is this one. We can make separate a ticket for that specifically if it is still an issue.

[cjmabry]

Hi @juliao762 and @alandmih, was this all wrapped up and could I close out this ticket or were we still waiting on things?

[juliao762]

You can close it, thank you @cjmabry !