Handle Segment script behaviour on consent change

[rcantin-w]

Who is this for?

10964

What is it doing for them?

• Moves the Segment script to the body in _app and out of _document so we could change it based on client side changes and state.
• Adds analytics consent status to state to affect the above when needed.
• Adds load: false value (docs) to Segment script's options if consent has not been granted. The script doesn't disappear, but it's load function gets removed/not triggered by default.
• With useEffect, re-renders the script and its values (see above) should the state of the analytics consent change.
• Rename event that gets triggered on onAccept and onRevoke from analyticsConsentChanged to consentChanged, as we have marketing as well now. This was a miss from when we added a new category and made things confusing.
• Added the analytics consent state to the trackPageview useEffect's dependency array. Now, if someone toggles analytics consent on or off, or Accepts all cookies the first time they see the banner, if there are pageview values, the tracking gets triggered again.

How to test

• Add WC_analyticsDebug to your cookies (value: true), which will log events sent to Segment.
• Play around with all scenarios of cookies
• This page is a good one to test with as it has a pageview set-up: http://localhost:3000/articles/ZWTLeBUAACgAVku2
• Test going to a 404, it shouldn't break (has been an issue in the past) and cookies should work just like anywhere else.

Risks

We've misunderstood something and it affects Segment events. So I suggest we merge early next week and keep a close eye.

[github-actions[bot]]

Size Change: +4.69 kB (+0.48%)

Total Size: 982 kB

Filename	Size	Change
content/webapp/.next/static/chunks/1187.3e587b771f4e596e.js	0 B	-4.76 kB (removed)	🏆
content/webapp/.next/static/chunks/pages/_app-b5ae32e8b8f056a5.js	0 B	-107 kB (removed)	🏆
content/webapp/.next/static/chunks/webpack-deff53f7207a7155.js	0 B	-2.33 kB (removed)	🏆
identity/webapp/.next/static/chunks/pages/_app-faa942d597ee1057.js	0 B	-100 kB (removed)	🏆
content/webapp/.next/static/chunks/1187.f663a3df326eed89.js	4.76 kB	+4.76 kB (new file)	🆕
content/webapp/.next/static/chunks/pages/_app-d9d761e9126be844.js	109 kB	+109 kB (new file)	🆕
content/webapp/.next/static/chunks/webpack-05726b4de9b0c06d.js	2.33 kB	+2.33 kB (new file)	🆕
identity/webapp/.next/static/chunks/pages/_app-3a5813eaf8e42ea9.js	103 kB	+103 kB (new file)	🆕

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `content/webapp/.next/static/chunks/00a8a139.d1615490c6d9d990.js` | 59 kB | | `content/webapp/.next/static/chunks/1002-b2721e6482c83a94.js` | 4.34 kB | | `content/webapp/.next/static/chunks/1170.ad28feca2086d231.js` | 2.38 kB | | `content/webapp/.next/static/chunks/1349.d7fa638a45bd746d.js` | 3.18 kB | | `content/webapp/.next/static/chunks/1624.36ee3a10cb481879.js` | 270 B | | `content/webapp/.next/static/chunks/1747-7bd8bb2f4039b859.js` | 4.86 kB | | `content/webapp/.next/static/chunks/2224.c3d36692d71659d1.js` | 409 B | | `content/webapp/.next/static/chunks/2545.81b263fdea971f46.js` | 3.48 kB | | `content/webapp/.next/static/chunks/2568.ba2e160d2178193a.js` | 2.81 kB | | `content/webapp/.next/static/chunks/2630-5557119f622d72e9.js` | 4.45 kB | | `content/webapp/.next/static/chunks/267-cccc1b14a343a87b.js` | 3.66 kB | | `content/webapp/.next/static/chunks/2889.a2ffc850cd6682c4.js` | 1.83 kB | | `content/webapp/.next/static/chunks/3.b502c0af4bf6d3fa.js` | 2.78 kB | | `content/webapp/.next/static/chunks/3199.59646cfe68c708a6.js` | 2.58 kB | | `content/webapp/.next/static/chunks/3250-f50f8ea6fa9daefd.js` | 3.45 kB | | `content/webapp/.next/static/chunks/3419.8302d48bf43d69c3.js` | 419 B | | `content/webapp/.next/static/chunks/3420-400c17b2f7077e31.js` | 3.91 kB | | `content/webapp/.next/static/chunks/3627.cf9886fda60a7d8f.js` | 1.68 kB | | `content/webapp/.next/static/chunks/382-6c2bd3fb8a532e32.js` | 3.07 kB | | `content/webapp/.next/static/chunks/4133-dec44a56dbcade59.js` | 3.67 kB | | `content/webapp/.next/static/chunks/4468.b40b56238d215042.js` | 6.47 kB | | `content/webapp/.next/static/chunks/4621-d854f758923784b3.js` | 5.11 kB | | `content/webapp/.next/static/chunks/4825-0da3332c92191dfb.js` | 7.76 kB | | `content/webapp/.next/static/chunks/4962-a0a4531c5d6065ae.js` | 12.3 kB | | `content/webapp/.next/static/chunks/5048.e1e927ce200b8df3.js` | 4.9 kB | | `content/webapp/.next/static/chunks/5068.3ed1c6c988c72cde.js` | 3.23 kB | | `content/webapp/.next/static/chunks/5292-e5922c085480a271.js` | 2.91 kB | | `content/webapp/.next/static/chunks/5389.b37ba3f51bbce583.js` | 1.62 kB | | `content/webapp/.next/static/chunks/5637-b81d956dc1d5b56b.js` | 20.6 kB | | `content/webapp/.next/static/chunks/5768-4bb2fee1a42ccb79.js` | 3.17 kB | | `content/webapp/.next/static/chunks/583-ee31e85b0ded79ac.js` | 2.64 kB | | `content/webapp/.next/static/chunks/6207.210a73c1d1dacf3e.js` | 268 B | | `content/webapp/.next/static/chunks/6318.dafc8c5d0817c779.js` | 2.29 kB | | `content/webapp/.next/static/chunks/6501.28ce8d42744c59bf.js` | 281 B | | `content/webapp/.next/static/chunks/6577-effbaab7dae5448b.js` | 3.52 kB | | `content/webapp/.next/static/chunks/6614-60abee75d4d9e05b.js` | 5.09 kB | | `content/webapp/.next/static/chunks/6677.859ea72e9d7bdd12.js` | 19.9 kB | | `content/webapp/.next/static/chunks/6862-2b879b8cbc40506f.js` | 4.4 kB | | `content/webapp/.next/static/chunks/6879.5c504ae7600be437.js` | 2.6 kB | | `content/webapp/.next/static/chunks/7107-690d46121f0c6582.js` | 26.8 kB | | `content/webapp/.next/static/chunks/722-eca537339d9eff69.js` | 3.32 kB | | `content/webapp/.next/static/chunks/7414-4903f8bb8bb5d311.js` | 5.87 kB | | `content/webapp/.next/static/chunks/7888.122c0ef22c1a365a.js` | 5.36 kB | | `content/webapp/.next/static/chunks/8189-9bc510b8427ee840.js` | 3.43 kB | | `content/webapp/.next/static/chunks/8348.df2c1f1e661ae6bf.js` | 3.2 kB | | `content/webapp/.next/static/chunks/8476-9d264c37ea1f9a35.js` | 3.96 kB | | `content/webapp/.next/static/chunks/9049-9c1a7cfd68dd6a27.js` | 3.76 kB | | `content/webapp/.next/static/chunks/9065-20422656e905f45d.js` | 5.31 kB | | `content/webapp/.next/static/chunks/908.972937269334aa39.js` | 3.94 kB | | `content/webapp/.next/static/chunks/9519-9db5e2ee0c074bad.js` | 7.65 kB | | `content/webapp/.next/static/chunks/9590.808eeadf61368e35.js` | 2.65 kB | | `content/webapp/.next/static/chunks/9680-793248017be348e0.js` | 3.09 kB | | `content/webapp/.next/static/chunks/9704-cabf3fa83d4504e4.js` | 4.54 kB | | `content/webapp/.next/static/chunks/9778-705fe03826f54617.js` | 3.07 kB | | `content/webapp/.next/static/chunks/9950.91d7ab667432c53b.js` | 3.16 kB | | `content/webapp/.next/static/chunks/framework-f29e48ae95cae5a3.js` | 45.2 kB | | `content/webapp/.next/static/chunks/main-978dba4ddde48128.js` | 30.7 kB | | `content/webapp/.next/static/chunks/pages/_error-54ad671c1257cec3.js` | 335 B | | `content/webapp/.next/static/chunks/pages/404-9e69cf17ffb062d5.js` | 260 B | | `content/webapp/.next/static/chunks/pages/500-889eb9240c0e2c83.js` | 261 B | | `content/webapp/.next/static/chunks/pages/articles-4b7444af0e24f4b2.js` | 2.34 kB | | `content/webapp/.next/static/chunks/pages/articles/[articleId]-a0b7bf55228feb4d.js` | 6.75 kB | | `content/webapp/.next/static/chunks/pages/books-fef6bcf298982ec9.js` | 2.34 kB | | `content/webapp/.next/static/chunks/pages/books/[bookId]-69504423494ce32d.js` | 4.22 kB | | `content/webapp/.next/static/chunks/pages/collections-2ca9a866b9740be6.js` | 2.06 kB | | `content/webapp/.next/static/chunks/pages/concepts/[conceptId]-febc5367f39cf469.js` | 3.89 kB | | `content/webapp/.next/static/chunks/pages/cookie-policy-24ac3435bb4afa50.js` | 6.36 kB | | `content/webapp/.next/static/chunks/pages/covid-welcome-back-e0fb84a565a15c7e.js` | 11.2 kB | | `content/webapp/.next/static/chunks/pages/event-series/[eventSeriesId]-47457159f328dadc.js` | 3.33 kB | | `content/webapp/.next/static/chunks/pages/events-909a6966d4f582a2.js` | 2.46 kB | | `content/webapp/.next/static/chunks/pages/events/[eventId]-ddec01a834ff4628.js` | 8.92 kB | | `content/webapp/.next/static/chunks/pages/events/[eventId]/visual-stories-a983536c3e5e28a8.js` | 302 B | | `content/webapp/.next/static/chunks/pages/exhibitions-669c0fd08fc7f1f4.js` | 2.64 kB | | `content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]-80500c31f62fcc2b.js` | 4.02 kB | | `content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]/visual-stories-d1aeb46e8e916d28.js` | 303 B | | `content/webapp/.next/static/chunks/pages/guides/[pageId]-da8a3a9313b74f97.js` | 1.95 kB | | `content/webapp/.next/static/chunks/pages/guides/exhibitions-6a275816368c8abf.js` | 2.95 kB | | `content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]-42e7d9e9b15c6bd5.js` | 3.9 kB | | `content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]/[type]-3f6a16642eb01cd4.js` | 5.73 kB | | `content/webapp/.next/static/chunks/pages/index-09e25e0db70e76bc.js` | 3.63 kB | | `content/webapp/.next/static/chunks/pages/newsletter-98605a779ca17771.js` | 2.4 kB | | `content/webapp/.next/static/chunks/pages/pages/[pageId]-a5d41c786e9f3307.js` | 1.93 kB | | `content/webapp/.next/static/chunks/pages/projects/[pageId]-9716ea56b80546b7.js` | 1.96 kB | | `content/webapp/.next/static/chunks/pages/search-2dd1ef17754eecb2.js` | 5.38 kB | | `content/webapp/.next/static/chunks/pages/search/events-7e0463aaa02201a0.js` | 2.05 kB | | `content/webapp/.next/static/chunks/pages/search/images-b06e3bea4b012994.js` | 1.61 kB | | `content/webapp/.next/static/chunks/pages/search/stories-9e6f72fa59d378c7.js` | 3.24 kB | | `content/webapp/.next/static/chunks/pages/search/works-709d146b869c6197.js` | 4.4 kB | | `content/webapp/.next/static/chunks/pages/seasons/[seasonId]-83d5dff4bdac5b7d.js` | 3.92 kB | | `content/webapp/.next/static/chunks/pages/series/[seriesId]-a54f1ff70fb3e79f.js` | 5.56 kB | | `content/webapp/.next/static/chunks/pages/slice-simulator-f30eba1fff249b02.js` | 8.48 kB | | `content/webapp/.next/static/chunks/pages/stories-e97be60d8eca10f1.js` | 1.76 kB | | `content/webapp/.next/static/chunks/pages/stories/[contentType]-d2f96d313bd42e31.js` | 2.38 kB | | `content/webapp/.next/static/chunks/pages/visit-us-335908532f352971.js` | 2.45 kB | | `content/webapp/.next/static/chunks/pages/visual-stories/[visualStoryId]-0e090de4ea368053.js` | 237 B | | `content/webapp/.next/static/chunks/pages/whats-on-d3f1b7279bb5142e.js` | 213 B | | `content/webapp/.next/static/chunks/pages/whats-on/[period]-9d135cd2564e60da.js` | 285 B | | `content/webapp/.next/static/chunks/pages/works/[workId]-d652e42a0ebf563c.js` | 25.9 kB | | `content/webapp/.next/static/chunks/pages/works/[workId]/download-2f4fafaebbec9ad2.js` | 3.1 kB | | `content/webapp/.next/static/chunks/pages/works/[workId]/images-6549881d746d6384.js` | 678 B | | `content/webapp/.next/static/chunks/pages/works/[workId]/items-a9385cdd3a82576b.js` | 2.1 kB | | `content/webapp/.next/static/chunks/polyfills-c67a75d1b6f99dc8.js` | 31.1 kB | | `identity/webapp/.next/static/chunks/374.94537fd117195c86.js` | 2.47 kB | | `identity/webapp/.next/static/chunks/432.fa29da5acdb8e0b1.js` | 744 B | | `identity/webapp/.next/static/chunks/442-29780463d96993ea.js` | 8.34 kB | | `identity/webapp/.next/static/chunks/644-a3420a6bbc15048b.js` | 15.1 kB | | `identity/webapp/.next/static/chunks/677.a0884a27fb537187.js` | 19.9 kB | | `identity/webapp/.next/static/chunks/framework-19f3649580393c10.js` | 45.2 kB | | `identity/webapp/.next/static/chunks/main-d973a3979032d64a.js` | 32.2 kB | | `identity/webapp/.next/static/chunks/pages/_error-8e82953fa241027d.js` | 1.42 kB | | `identity/webapp/.next/static/chunks/pages/delete-requested-36dbb378188484a0.js` | 3.22 kB | | `identity/webapp/.next/static/chunks/pages/error-8117ccec5d62785a.js` | 1.7 kB | | `identity/webapp/.next/static/chunks/pages/index-744b70e8931f1e55.js` | 12.1 kB | | `identity/webapp/.next/static/chunks/pages/registration-d07114234ef485c5.js` | 4.11 kB | | `identity/webapp/.next/static/chunks/pages/success-babc5c74ab7f7620.js` | 3.29 kB | | `identity/webapp/.next/static/chunks/pages/validated-2ef62657092669ba.js` | 3.36 kB | | `identity/webapp/.next/static/chunks/polyfills-c67a75d1b6f99dc8.js` | 31.1 kB | | `identity/webapp/.next/static/chunks/webpack-2e2c0b3078f78fb0.js` | 1.82 kB |

_{compressed-size-action}

[kenoir]

This method might not work best for Pixel tracking. We assume that stakeholders will want data sent from that first click/page view, and therefore it might sit better at the GTM level with a custom event trigger on consent change.

Are we not able to do the same thing in the codebase here on consent change? I thought the civic uk lib had a hook for that?

[rcantin-w]

Are we not able to do the same thing in the codebase here on consent change? I thought the civic uk lib had a hook for that?

If you mean the onConsentChange event, I tried to do it through the event listener and the state of the app, but I think the issue is that they're loaded in _document which is SS only, which means (I think) it needs a full reload to change its contents, or we'd have to find the script in JS and manually add and remove it, which feels like a lot. To be honest this ticket has stretched a bit and it has been a while since I'd done that testing so happy to try again to check I understood the options correctly, which are the ones we discussed yesterday.

That's what we'd landed on with Segment in the past as well, that's the current behaviour for that script.

[kenoir]

I think the onAccept event in the CivicUk config gives us the opportunity to hook into this client side: https://github.com/wellcomecollection/wellcomecollection.org/blob/main/common/views/components/CivicUK/index.tsx#L146

edit: sorry, the event here is called analyticsConsentChanged, can we not add an eventListener for this?

edit, edit: we do - that's how the gtag is updated ... actually updating a component is what needs working out.