Overview

A user identifier (user id) is used by different channels (e.g. GA4) to help stitch a unique user's shopper journey/session.

Elevar's user id is used by default on non headless Shopify stores. It utilizes the following:

• Shopify's long-lasting server-set cookie
• Elevar generated UUID

Motivation for Passing Your Own User Identifier:

In the headless context, the cookie described above is not available. This means that in some circumstances, the standard user id that Elevar uses on headless sites has a life of as little as 24 hours.

This leads to one user appearing as multiple users in platforms like GA4. It also has implications for Elevar's Session Enrichment feature.

Passing your own user id can help you avoid these issues. However, you must either retrieve you user id from a server set cookie (which you'll need manually configure), or use a fingerprinting software to retrieve a user id that you trust to be long lasting.

How to Pass Your Own User Identifier

You can provide your own user id by doing the following. Note that this code MUST be run before the Elevar snippet you've copied from the Elevar app is run.

🚧

The ElevarUserIdFn must return a string or a promise that returns a string

🚧

Examine the console for errors from Elevar after your function is defined

🚧

The user id function must be defined on every page reload, this doesn't include virtual page changes

Then, when any data layer event is pushed, the following user id will be used:

Example of Defining the User Id Function in Next.js

• Presuming your have referenced the following to load our main snippet:
  https://nextjs.org/docs/app/building-your-application/optimizing/scripts#application-scripts
  https://nextjs.org/docs/app/building-your-application/optimizing/scripts#inline-scripts
  • You should define window.ElevarUserIdFn at the top of that existing Script.
• If you have added our snippet via a useEffect at the top level of your app (ensuring that it only fires once per hard page load), you can either define window.ElevarUserIdFn at the top of that effect, or outside of the component that calls that effect (but in the same file).

Example of Server Setting the User Id From Next.js

• This can be achieved with https://nextjs.org/docs/app/building-your-application/routing/middleware

import { NextResponse } from 'next/server'

// Can be whatever you want, but the value here will mean you don't need to define `window.ElevarUserIdFn` as well (as we read from this automatically for Shopify).
const cookieName = "_shopify_y";

export function middleware(request) {
  const cookie = request.headers.get(cookieName);
  const response = NextResponse.next();

  if (!cookie) {
    const cookieValue = crypto.randomUUID();
    response.headers.set("Set-Cookie", `${cookieName}=${cookieValue}`);
  }

  return response;
}

Notes:

• If you've run the Elevar scripts/snippet prior to defining your user id function, Elevar won't recognize the new user id. When testing, it's important to clear all cookies and local storage.
• For existing customers who have been using Elevar's standard User IDs, starting to pass your own User ID will not cause an increase in new user traffic. If a user's previous User ID still exists in local storage or our cookie, that will be the User ID we use.