Dispatch Fides.js lifecycle events on window (FidesInitialized, FidesUpdated) and cross-publish to Fides.gtm() integration #3454

NevilleS · 2023-06-04T23:38:17Z

Closes #3350
Closes #3348

Code Changes

Dispatch a "FidesInitialized" event on window when Fides.init() completes successfully
Dispatch a "FidesUpdated" event on window whenever preferences are updated
Update Fides.gtm() Google Tag Manager integration to listen for lifecycle events and publish to GTM whenever consent preferences are initialized/updated
Add Cypress tests to clients/privacy-center to listen for Fides.js events
Add "FidesInitialized" event name to GTM, once we confirm that wouldn't be a breaking change

Steps to Confirm

Run privacy center Cypress tests
Run sample app locally with Google Tag Manager configured

Pre-Merge Checklist

All CI Pipelines Succeeded
Documentation:
- documentation complete, PR opened in fidesdocs
- documentation issue created in fidesdocs
Issue Requirements are Met
Relevant Follow-Up Issues Created
Update CHANGELOG.md
For API changes, the Postman collection has been updated

Description Of Changes

This exposes two new custom events on the window object to allow a user to listen for Fides.js lifecycle events and integrate consent state changes into their own custom Javascript handling. This is needed now that we allow preferences to change at runtime via the banner/modal components!

For example, you might integrate Fides.js into your website like:

<script src="privacy.example.com.fides.js" />
<script>
  window.addEventListener("FidesUpdated", (event) => {
    if (event.detail.consent.data_sales_and_sharing) {
      // enable data sales code
    }
  });
</script>

This PR also updates the Fides.gtm() integration to listen to the same lifecycle events and cross-publish them to GTM. This ensures GTM stays up to date if consent preferences are updated by the banner/modal.

NevilleS · 2023-06-04T23:43:32Z

This should be good to go. Just want to triple-check the event publishing to GTM. I'd also like to add the event: "FidesInitialized" to the existing dataLayer.push() we do, but just want to confirm that wouldn't mess up any existing GTM integrations with some manual testing.

cypress · 2023-06-04T23:54:28Z

Passing run #2436 ↗︎

0	4	0	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Merge `f52d09c` into `67db31e`...
Project: fides	Commit: `58a22243b4 ℹ️`
Status: Passed	Duration: 00:49 💡
Started: Jun 5, 2023 10:30 PM	Ended: Jun 5, 2023 10:31 PM

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

NevilleS · 2023-06-05T13:43:21Z

Did some more research on GTM this morning and I'm quite confident that I can safely add event: "FidesInitialized" to the current .push call without any negative consequences and it'll just make it easier to use and debug 👍

Still want to do some manual testing before merging this, but going to adjust that now and open up for review...

NevilleS

Few comments to help explain what's going on

NevilleS · 2023-06-05T13:50:06Z

clients/fides-js/src/integrations/meta.ts

@@ -82,6 +82,8 @@ type MetaOptions = {
 /**
 * Call Fides.meta to configure Meta Pixel tracking.
 *
+ * DEFER: Update this integration to support async Fides events


Add follow-up issue

NevilleS · 2023-06-05T13:50:11Z

clients/fides-js/src/integrations/shopify.ts

@@ -33,6 +33,8 @@ const applyOptions = (options: ShopifyOptions) => {
 * Call Fides.shopify to configure Shopify customer privacy. Currently the only consent option
 * Shopify allows to be configured is user tracking.
 *
+ * DEFER: Update this integration to support async Fides events


Add follow-up issue

NevilleS · 2023-06-05T13:50:48Z

clients/fides-js/src/lib/events.ts

+/**
+ * Defines the properties available on event.detail. As of now, these are an
+ * explicit subset of properties from the Fides cookie
+ * TODO: add identity and meta?


Decide on this - I think it makes sense to include these in the event, I could see a listener wanting a bit of information about the identity when processing the preferences, etc.

Will facebook / shopify need identity or other metadata?

Nothing needs it yet, but I'm wondering what a developer might need when integrating consent into their app via these events...

NevilleS · 2023-06-05T13:51:39Z

clients/fides-js/src/lib/preferences.ts

+  // Update the cookie object
+  // eslint-disable-next-line no-param-reassign
+  cookie.consent = consentCookieKey;


This mutates the provided cookie param, which might be a bit surprising... but I think it makes sense to do this as we don't store that state anywhere else super declaratively. This is especially true since we call saveFidesCookie below which persists the updated state to the browser - it'd be surprising to me to find that the cookie object was actually more stale than the version saved to browser since we weren't updating that object before!

this is fine. It's the same pattern we use in the init method of fides.ts

clients/privacy-center/cypress/support/commands.ts

NevilleS

Few comments to help explain what's going on

…zation

eastandwestwind · 2023-06-05T17:52:20Z

clients/fides-js/src/lib/events.ts

+    // Pick a subset of the Fides cookie properties to provide as event detail
+    const { consent }: FidesEventDetail = cookie;
+    const detail: FidesEventDetail = { consent };
+    const event = new CustomEvent(type, { detail });


Ah this is cool, learned about CustomEvent native obj today

eastandwestwind

Looks good so far.

Main thing I'd like to see updated is in fides-js-components-demo.html and fides-js-demo.html, we are currently using a timer to check when fides is initialized. We can now replace this with the addEventListener you've added. Feel free to create a new ticket, and I can take care of it, either way.

NevilleS · 2023-06-05T18:12:05Z

I've figured out how to use the GTM preview mode to debug the firing of events locally:

Everything works nicely here. The only issue is the async nature of FidesInitialized; it'd be more convenient for it to fire faster... but that's just the reality of how this overlay is configured now.

…into ns-add-events-api

NevilleS · 2023-06-05T21:58:10Z

Blergh - I need to edit these tests to work still.

…tion of fides.js

NevilleS added 4 commits June 4, 2023 17:31

Add test stubs for Fides.js events

dda542d

Add stub tests for GTM events

42ecd36

Dispatch FidesInitialized and FidesUpdated events

ef71ffd

Update GTM integration to support async Fides events

1cdcee3

NevilleS added 2 commits June 5, 2023 09:48

Include event on all GTM pushes

ad40ffe

Add a few comments to the cypress tests

dcd59de

NevilleS commented Jun 5, 2023

View reviewed changes

NevilleS marked this pull request as ready for review June 5, 2023 13:58

NevilleS added 4 commits June 5, 2023 10:02

Fix comment format

ec83a36

Update GTM tests in consent.cy.ts as well

43db5a2

Fix lint error for fides-modal-link tag

9c76708

Restructure fides.js script to load earlier, to simplify GTM initiali…

01f1f82

…zation

eastandwestwind reviewed Jun 5, 2023

View reviewed changes

eastandwestwind requested changes Jun 5, 2023

View reviewed changes

NevilleS added 5 commits June 5, 2023 17:05

Update test pages to use FidesInitialized event

9913a9a

Reformat with prettier

8f62f17

Update CHANGELOG

95e6855

Merge branch 'feature/privacy-components' of github.com:ethyca/fides …

49c19f4

…into ns-add-events-api

Update some failing Cypress tests

b80a825

eastandwestwind approved these changes Jun 5, 2023

View reviewed changes

NevilleS added 2 commits June 5, 2023 18:09

Fix local test pages & cypress tests to handle synchronous initializa…

6033535

…tion of fides.js

Fix formatting

f52d09c

NevilleS merged commit 384301e into feature/privacy-components Jun 6, 2023

NevilleS deleted the ns-add-events-api branch June 6, 2023 01:08

This was referenced Jun 7, 2023

Javascript API to subscribe to "events" for preference changes/initialization/etc #3350

Closed

Update Google Tag Manager (GTM) plugin to subscribe to "events" for preference changes #3348

Closed

This was linked to issues Jun 7, 2023

Update Google Tag Manager (GTM) plugin to subscribe to "events" for preference changes #3348

Closed

Javascript API to subscribe to "events" for preference changes/initialization/etc #3350

Closed

allisonking mentioned this pull request Jun 8, 2023

Feature: Privacy components 🥸 #3411

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dispatch Fides.js lifecycle events on window (FidesInitialized, FidesUpdated) and cross-publish to Fides.gtm() integration #3454

Dispatch Fides.js lifecycle events on window (FidesInitialized, FidesUpdated) and cross-publish to Fides.gtm() integration #3454

NevilleS commented Jun 4, 2023 •

edited

Loading

NevilleS commented Jun 4, 2023

cypress bot commented Jun 4, 2023 •

edited

Loading

NevilleS commented Jun 5, 2023

NevilleS left a comment

NevilleS Jun 5, 2023

NevilleS Jun 5, 2023

NevilleS Jun 5, 2023

eastandwestwind Jun 5, 2023 •

edited

Loading

NevilleS Jun 5, 2023

NevilleS Jun 5, 2023

eastandwestwind Jun 5, 2023

NevilleS left a comment

eastandwestwind Jun 5, 2023

eastandwestwind left a comment

NevilleS commented Jun 5, 2023

NevilleS commented Jun 5, 2023

Dispatch Fides.js lifecycle events on window (FidesInitialized, FidesUpdated) and cross-publish to Fides.gtm() integration #3454

Dispatch Fides.js lifecycle events on window (FidesInitialized, FidesUpdated) and cross-publish to Fides.gtm() integration #3454

Conversation

NevilleS commented Jun 4, 2023 • edited Loading

Code Changes

Steps to Confirm

Pre-Merge Checklist

Description Of Changes

NevilleS commented Jun 4, 2023

cypress bot commented Jun 4, 2023 • edited Loading

Passing run #2436 ↗︎

NevilleS commented Jun 5, 2023

NevilleS left a comment

Choose a reason for hiding this comment

NevilleS Jun 5, 2023

Choose a reason for hiding this comment

NevilleS Jun 5, 2023

Choose a reason for hiding this comment

NevilleS Jun 5, 2023

Choose a reason for hiding this comment

eastandwestwind Jun 5, 2023 • edited Loading

Choose a reason for hiding this comment

NevilleS Jun 5, 2023

Choose a reason for hiding this comment

NevilleS Jun 5, 2023

Choose a reason for hiding this comment

eastandwestwind Jun 5, 2023

Choose a reason for hiding this comment

NevilleS left a comment

Choose a reason for hiding this comment

eastandwestwind Jun 5, 2023

Choose a reason for hiding this comment

eastandwestwind left a comment

Choose a reason for hiding this comment

NevilleS commented Jun 5, 2023

NevilleS commented Jun 5, 2023

NevilleS commented Jun 4, 2023 •

edited

Loading

cypress bot commented Jun 4, 2023 •

edited

Loading

eastandwestwind Jun 5, 2023 •

edited

Loading