Tracking issues across subdomains

[deammer]

I'm running into problems when tracking users across subdomains with this SDK.

My user flow:

1. customer visits my.domain.com. mParticle.init() is called when the page loads.
2. customer picks a product to buy
3. customer logs in and mParticle.login() is called, resulting in the correct user_identities being sent alongside future mParticle events
4. customer is redirected to www.domain.com to complete checkout. mParticle.init() is called when the page loads.

Expected result: the user_identities object contains our user's customerid.

Actual result: the user_identities object is empty.

The initializing code looks like this on the www.domain.com subdomain:

import mParticle from '@mparticle/web-sdk';

const mParticleConfig = {
  deviceId: '...',
  workspaceToken: '...',
  identifyRequest: {
    userIdentities: {
      // The value below comes from a cookie. I verified that
      // it is valid before building this config object.
      customerid: "12345678",
    }
  },
  dataPlan: {
    planId: '...',
  },
};

mParticle.init("api id goes here", mParticleConfig);

If I reload the page at this point, the next mParticle.init() call will work as expected. Could you help me figure out whether this is a user error or a bug in the SDK? Does the SDK maintain some kind of persistence layer that carries over between subdomains and would prevent the identifyRequest field from taking effect?

Thank you in advance 🙏

[deammer]

I answered my own question after digging into the persistence code. By default, the SDK uses local storage to persist information on a site, but that means the information cannot be shared across subdomains (as a security restriction of local storage). The solution in my case was to store persistent data in cookies instead using the following config option:

const config = {
  useCookieStorage: true,
  // ... other config fields
}

This might be something worth documenting in the README?

[deammer]

Note that using cookies instead of local storage doesn't explain why calling mParticle.init() with a valid identifyRequest object doesn't work as intended. I would still like some help from the maintainers to explain that one 🙏

[deammer]

I figured out a fix for our cross-subdomain tracking issue so I wanted to share for anyone else that comes across this. I made the change in a fork because I had to move fast, but maybe this change is worth adding into this repo.

Assuming that the mParticle initialization relies on a user identifier (customerid) that's stored in a cookie or local storage:

// This code is called when the app loads
const storedCustomerId = cookies.get("customerId");

mParticle.init("API KEY", {
  // ... other required fields
  identifyRequest: {
    userIdentities: {
      customerid: storedCustomerId
    }
  }
})

Example user flow:

1. customer lands on www.website.com
   a. mParticle initializes on the subdomain
   b. mParticle starts a session and stores it in local storage
2. customer is sent to login.website.com to log in
   a. mParticle initializes on the subdomain
   b. mParticle starts a session and stores it in local storage
3. customer logs in
   a. mParticle.login() is called
   b. a cookie containing the customerid is stored
   c. user is thus identified on login.website.com
4. customer is sent back to www.website.com
   a. mParticle initializes on the subdomain
   b. mParticle does not start a new session because there's already one in local storage

Result: customers are not identified in the subsequent events.

I tracked down the issue to SessionManager's initialize method and made the following change:

this.initialize = function(): void {
  if (mpInstance._Store.sessionId) {
    const sessionTimeoutInMilliseconds: number =
      mpInstance._Store.SDKConfig.sessionTimeout * 60000;

    if (
      new Date() >
      new Date(
          mpInstance._Store.dateLastEventSent.getTime() +
              sessionTimeoutInMilliseconds
      )
    ) {
        self.endSession();
        self.startNewSession();
    } else {
+     // Check if we have an identified user
+     const user = mpInstance.Identity.getCurrentUser()
+     let needToIdentity = false
+
+     if (user) {
+       // Here, userIdentities could be an empty object. If that's the case AND
+       // identifyRequest has at least a customerid, we will force the identify()
+       // call.
+       const storedUserIdentities = user.getUserIdentities()?.userIdentities
+       const hasStoredCustomerId = storedUserIdentities != null && typeof storedUserIdentities.customerid === "string"
+
+       const identifyRequest = mpInstance._Store.SDKConfig.identifyRequest
+       const identifyRequestHasCustomerId = identifyRequest != null && typeof identifyRequest.userIdentities.customerid === "string"
+
+       if (!hasStoredCustomerId && identifyRequestHasCustomerId) {
+         needToIdentity = true
+       }
+     }
+
      // https://go.mparticle.com/work/SQDSDKS-6045
      const persistence: IPersistenceMinified = mpInstance._Persistence.getPersistence();
+     if (needToIdentify || (persistence && !persistence.cu)) {
        // https://go.mparticle.com/work/SQDSDKS-6323
        mpInstance.Identity.identify(
            mpInstance._Store.SDKConfig.identifyRequest,
            mpInstance._Store.SDKConfig.identityCallback
        );
        mpInstance._Store.identifyCalled = true;
        mpInstance._Store.SDKConfig.identityCallback = null;
      }
    }
  } else {
    self.startNewSession();
  }
};

@rmi22186 and other maintainers, what do you think about this change? I'd be happy to open a PR for it if you think it's valuable.

[alexs-mparticle]

@deammer Thanks for raising this. I think this would be a great addition to the Web SDK codebase and would love to see a PR if you're willing to create one.

Please tag me when it's ready as I will be the one doing the actual review.