🪟 🔧 Add Cross domain tracking for segment (#16268)

* 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

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

@@ -26,4 +26,5 @@ export class AnalyticsService {
 
   group = (organisationId: string, traits: Record<string, unknown> = {}): void =>
     this.getSegmentAnalytics()?.group?.(organisationId, traits);
+  setAnonymousId = (anonymousId: string) => this.getSegmentAnalytics()?.setAnonymousId(anonymousId);
 }

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

@@ -21,6 +21,7 @@ import DestinationPage from "pages/DestinationPage";
 import OnboardingPage from "pages/OnboardingPage";
 import SourcesPage from "pages/SourcesPage";
 import { useCurrentWorkspace, WorkspaceServiceProvider } from "services/workspaces/WorkspacesService";
+import { setSegmentAnonymousId, useGetSegmentAnonymousId } from "utils/crossDomainUtils";
 import { storeUtmFromQuery } from "utils/utmStorage";
 import { CompleteOauthRequest } from "views/CompleteOauthRequest";
 
@@ -139,6 +140,7 @@ export const Routing: React.FC = () => {
 
   useEffectOnce(() => {
     storeUtmFromQuery(search);
+    setSegmentAnonymousId(search);
   });
 
   const analyticsContext = useMemo(
@@ -150,6 +152,7 @@ export const Routing: React.FC = () => {
         : null,
     [user]
   );
+  useGetSegmentAnonymousId();
   useAnalyticsRegisterValues(analyticsContext);
   useAnalyticsIdentifyUser(user?.userId, { providers, email: user?.email });
 

airbyte-webapp/src/utils/crossDomainUtils.test.ts

@@ -0,0 +1,19 @@
+import { clearSegmentCookie, setSegmentAnonymousId } from "./crossDomainUtils";
+
+describe("Tracking utils", () => {
+  beforeEach(() => {
+    clearSegmentCookie();
+  });
+
+  it("correctly creates the cookie", () => {
+    const anonymousId = "anonymousId";
+    setSegmentAnonymousId("?ajs_anonymous_id=anonymousId");
+
+    expect(localStorage.getItem("ajs_anonymous_id")).toEqual(JSON.stringify(anonymousId));
+  });
+
+  it("only creates the cookie if the param is present", () => {
+    setSegmentAnonymousId("?utm_source=twitter&utm_campaign=spring2022");
+    expect(localStorage.getItem("ajs_anonymous_id")).toBeNull();
+  });
+});

airbyte-webapp/src/utils/crossDomainUtils.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+
+import { useAnalyticsService } from "hooks/services/Analytics";
+
+export const setSegmentAnonymousId = (queryString?: string): void => {
+  const queryParams = new URLSearchParams(queryString);
+  const ajs_anonymous_id = queryParams.get("ajs_anonymous_id");
+
+  if (ajs_anonymous_id) {
+    localStorage.setItem("ajs_anonymous_id", JSON.stringify(ajs_anonymous_id));
+  }
+};
+
+export const useGetSegmentAnonymousId = (): void => {
+  const analyticsService = useAnalyticsService();
+  const anonymousId = localStorage.getItem("ajs_anonymous_id");
+
+  useEffect(() => {
+    if (anonymousId) {
+      analyticsService.setAnonymousId(JSON.parse(anonymousId));
+    }
+  }, [anonymousId, analyticsService]);
+};
+
+export const clearSegmentCookie = () => {
+  localStorage.removeItem("ajs_anonymous_id");
+};