🪟 🔧 Add Cross domain tracking for segment #16268

letiescanciano · 2022-09-02T11:11:35Z

What

This PR will allow us to pass ajs_anonymous_id Segment cookie from users coming from airbyte.com into cloud.airbyte.io

This PR also add @types/segment-analytics instead of having to define our own types.
Demo: https://www.loom.com/share/bb0d5ed9a4c34121b01db6957c60dd23
Updated approach: https://www.loom.com/share/40eae27720f34cbc8dc3956868b6e2c3

How

We will receive ajs_anonymous_id as a query param and save it in a cookie (this way even if the user does not sign up in that moment, we'll still have it)
We add ajs_anonymous_id whenever it exist to the first analytics.track() after a user is successfully created in cloud.

🚨 User Impact 🚨

No impact.

letiescanciano · 2022-09-02T11:12:07Z

airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx

@@ -97,6 +98,11 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
      news: userData.news ?? false,
    });

+    const previousAnonymousId = Cookies.get("ajs_anonymous_id");
+    if (previousAnonymousId) {


Check if the cookie exists and if so, set the anonymousId instead of creating a new one

letiescanciano · 2022-09-02T11:12:21Z

airbyte-webapp/src/core/analytics/AnalyticsService.test.ts

+      user: jest.fn(),
+      setAnonymousId: jest.fn(),
+      init: jest.fn(),
+      use: jest.fn(),
+      addIntegration: jest.fn(),
+      load: jest.fn(),
+      trackLink: jest.fn(),
+      trackForm: jest.fn(),
+      ready: jest.fn(),
+      debug: jest.fn(),
+      on: jest.fn(),
+      timeout: jest.fn(),


Needed because of new types

letiescanciano · 2022-09-05T10:03:53Z

It seems that we are going to try moving cloud.airbyte.io to cloud.airbyte.com to avoid any cross-domain tracking issues.

see: https://github.com/airbytehq/airbyte-cloud/issues/2623 for further details

* master: (200 commits) 🪟 🧹 Display returned error messages on replication view (#16280) 🎉 Source mixpanel: Use "Retry-After" header for backoff (#16770) 🐛 Source google ads: mark custom query fields required (#15858) 🪟 🔧Remove useRouter hook (#16598) CDK: improve TypeTransformer to convert simple types to array of simple types (#16636) CDK: TypeTransformer - warning message more informative (#16695) Source MySQL: Add Python SAT to detect backwards breaking changes (#16445) remove eager (#16756) bump com.networknt:json-schema-validator to latest version (#16619) Remove Cloud from Kafka docs (#16753) Normalization Summaries table and read/write methods (#16655) comment out flaky test suite while it is being investigated (#16752) Update ConfigRepository to read protocol version (#16670) Use LOG4J2 to wrap connectors logs to JSON format (#15668) Update connector catalog (#16749) 🪟 🎨 Remove feedback modal from UI (#16548) Add missing env var for Kube overlays (#16747) Prepare for React v18 upgrade (#16694) 🪟 🐛 Fix direct job linking to work with pagination (#16517) Fix formatting (#16743) ...

timroes · 2022-09-20T16:54:44Z

airbyte-webapp/src/utils/cookiesUtils.ts

+  const queryParams = new URLSearchParams(queryString);
+  const ajs_anonymous_id = queryParams.get("ajs_anonymous_id");
+  if (ajs_anonymous_id) {
+    Cookies.set("ajs_anonymous_id", ajs_anonymous_id);


I'd suggest we save this in local storage instead, so we wouldn't need to add a new library here for cookies.

I went with the option of storing it directly in cookies because I think it will be better to override Segment cookie instead of having two separate instances of ajs_anonymous_id

I personally feel at that point we'd be "reusing" and overwriting something that is internal to how Segment works, and I feel just using our own local storage flag and just communicate with Segment via their API (which we anyway still do), feels like the cleaner approach of not running into any issues (e.g. what if the segment library actually decides overwriting the ajs_anonymous_id cookie again in some scenarios with their own value, and we lost our original one).

That said, given that we're planning to remove this code in a couple of weeks again once we moved to cloud.airbyte.com I'm fine leaving this however you prefer :)

Need to withdraw my comment :D I tested this, it actually is exactly what happens for me, the ajs_anonymous_id cookie is set from the query but then shortly afterwards rewritten (by segment) to a random UUID again, and thus we'd lose the parameter. So I think we'll need to store it in localsStorage.

Peek.2022-09-21.15-38.mp4

I will double check this, because I'm not seeing Segment overriding it:
https://www.loom.com/share/e305ec6d955b49fe9e87cd6d21008b89

Trying your localStorage proposal was not working as Segment was indeed creating a new ajs_anonymous_id

I'll keep working on this

letiescanciano · 2022-09-22T08:24:11Z

airbyte-webapp/src/utils/crossDomainUtils.ts

+  const ajs_anonymous_id = queryParams.get("ajs_anonymous_id");
+
+  if (ajs_anonymous_id) {
+    localStorage.setItem("ajs_anonymous_id", JSON.stringify(ajs_anonymous_id));


Saving in localStorage per Tim's suggestion. Also better practice :) Thanks!

letiescanciano · 2022-09-22T08:24:33Z

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -150,6 +156,7 @@ export const Routing: React.FC = () => {
        : null,
    [user]
  );
+  useAnalyticsSetAnonymousIdFromLocalStorage();


Extract anonymousId logic into its own hook

letiescanciano · 2022-09-22T08:25:08Z

airbyte-webapp/src/hooks/services/Analytics/useAnalyticsService.tsx

+
+  useEffect(() => {
+    if (anonymousId) {
+      analyticsService.setAnonymousId(JSON.parse(anonymousId));


Here is the key method, provided by Segment to manually override an anonymousId

https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/identity/#override-the-default-anonymous-id-with-a-call

letiescanciano · 2022-09-22T08:26:47Z

@timroes I simplified the approach and followed your suggestion about localStorage

https://www.loom.com/share/40eae27720f34cbc8dc3956868b6e2c3

timroes

Tested locally and it seems to work and setting the correct id in Segment. Some minor code comments left. Given we are about to remove this code hopefully soon again, I consider them all optional.

timroes · 2022-09-27T15:25:54Z

airbyte-webapp/src/hooks/services/Analytics/useAnalyticsService.tsx

+    if (anonymousId) {
+      analyticsService.setAnonymousId(JSON.parse(anonymousId));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps


We'd usually just add the analyticsService here as well. It's a stable reference so it won't cause us problems with rerendering, but helps not needing to disable eslint rules here.

timroes · 2022-09-27T15:27:13Z

airbyte-webapp/src/utils/crossDomainUtils.ts

+  const ajs_anonymous_id = queryParams.get("ajs_anonymous_id");
+
+  if (ajs_anonymous_id) {
+    localStorage.setItem("ajs_anonymous_id", JSON.stringify(ajs_anonymous_id));


Given that we only want to store a string here, I think we should get rid of the JSON.stringify (and JSON.parse above), which just add unnecessary performance overhead and making the types less safe (since JSON.parse does not know what the result type will be).

It wasn't working correctly without stringify + parse

timroes · 2022-09-27T15:28:32Z

airbyte-webapp/src/hooks/services/Analytics/useAnalyticsService.tsx

@@ -76,6 +76,17 @@ export const useAnalyticsIdentifyUser = (userId?: string, traits?: Record<string
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [userId]);
 };
+export const useAnalyticsSetAnonymousIdFromLocalStorage = (): void => {
+  const analyticsService = useAnalyticsService();
+  const anonymousId = localStorage.getItem("ajs_anonymous_id");


I'd suggest we move this into a getSegmentAnonymousId method into the crossDomainUtils file also, so we can keep all the knowledge about how and where it's stored local within this file.

* Add Cross domain tracking for segment * add email in identify call to test with Hubspot * save cookie on local storage, create hook to override Segment cookie * PR comments

Add Cross domain tracking for segment

e8cb9c7

letiescanciano requested a review from a team as a code owner September 2, 2022 11:11

github-actions bot added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Sep 2, 2022

letiescanciano commented Sep 2, 2022

View reviewed changes

letiescanciano requested a review from timroes September 2, 2022 11:34

add email in identify call to test with Hubspot

4eeda87

letiescanciano added growth-eng labels Sep 2, 2022

letiescanciano marked this pull request as draft September 5, 2022 10:00

letiescanciano marked this pull request as ready for review September 5, 2022 10:03

letiescanciano closed this Sep 5, 2022

letiescanciano reopened this Sep 15, 2022

timroes reviewed Sep 20, 2022

View reviewed changes

letiescanciano requested a review from timroes September 21, 2022 07:13

save cookie on local storage, create hook to override Segment cookie

6add02b

letiescanciano force-pushed the leti/add-segment-cross-domain-tracking branch from 39431d9 to 6add02b Compare September 22, 2022 08:23

letiescanciano commented Sep 22, 2022

View reviewed changes

Merge branch 'master' into leti/add-segment-cross-domain-tracking

e14c644

timroes approved these changes Sep 27, 2022

View reviewed changes

PR comments

91a5e8a

letiescanciano merged commit a43d2ed into master Sep 28, 2022

letiescanciano deleted the leti/add-segment-cross-domain-tracking branch September 28, 2022 08:36

octavia-squidington-iii mentioned this pull request Sep 28, 2022

Bump Airbyte version from 0.40.9 to 0.40.10 #17359

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🪟 🔧 Add Cross domain tracking for segment #16268

🪟 🔧 Add Cross domain tracking for segment #16268

letiescanciano commented Sep 2, 2022 •

edited

letiescanciano Sep 2, 2022

letiescanciano Sep 2, 2022

letiescanciano commented Sep 5, 2022

timroes Sep 20, 2022

letiescanciano Sep 20, 2022

timroes Sep 21, 2022

timroes Sep 21, 2022

timroes Sep 21, 2022

letiescanciano Sep 21, 2022

letiescanciano Sep 22, 2022

letiescanciano Sep 22, 2022

letiescanciano Sep 22, 2022

letiescanciano Sep 22, 2022

letiescanciano commented Sep 22, 2022

timroes left a comment

timroes Sep 27, 2022

timroes Sep 27, 2022

letiescanciano Sep 28, 2022

timroes Sep 27, 2022

🪟 🔧 Add Cross domain tracking for segment #16268

🪟 🔧 Add Cross domain tracking for segment #16268

Conversation

letiescanciano commented Sep 2, 2022 • edited

What

How

🚨 User Impact 🚨

Choose a reason for hiding this comment

Choose a reason for hiding this comment

letiescanciano commented Sep 5, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

letiescanciano commented Sep 22, 2022

timroes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

letiescanciano commented Sep 2, 2022 •

edited