Prerequisites

1. Twilio Segment and Twilio Engage with access to Profile API
2. An account with Uniform, if you don’t have access, you can request a trial here.
3. Next.js app instrumented with Uniform SDK. Check out our Getting Started section.
4. An account with Vercel.

Step 1: Configure personalization in Uniform Context

Step 2: Compose your personalized experience visually with Uniform Canvas

Step 3: Instrument your Next.js app with Segment

1. Make sure you have a JavaScript source enabled in your Segment workspace:
   

   
2. Grab your Write Key for this source, we will be using it later. More on this
   here.
3. Run npm install segment/snippetClick to copy to your app.
4. If you are using TypeScript, run npm i types/segment-analytics --save-devClick to copy
   to get the the typings for Segment Analytics.
5. Add Segment snippet into your
   /pages/_app.tsxClick to copy using next/scriptClick to copy:

   Copy to clipboard

   1
   2import Script from 'next/script';
   3import * as snippet from '@segment/snippet';
   4...
   5function renderSnippet() {
   6  const opts = {
   7    apiKey: process.env.NEXT_PUBLIC_ANALYTICS_WRITE_KEY,
   8    page: true,
   9  };
   10  return process.env.NODE_ENV === 'development' ? snippet.max(opts) : snippet.min(opts);
   11}
   12
   13function MyApp(...) => {
   14...
   15return (
   16    <>
   17      <Script id="segment-script" dangerouslySetInnerHTML={{ __html: renderSnippet() }} />
   18			...
   19		</>
   20	);
   21}

6. If you would like to track client-side routing events as page visits in Segment, you would need to add next/router event subscribers:

   Copy to clipboard

   1import { useRouter } from 'next/router';
   2...
   3// add this to the App render function:
   4const router = useRouter();
   5  useEffect(() => {
   6    const handleRouteChange = (url: string) => {
   7      global?.analytics?.page({
   8        path: url,
   9        referrer: window.location.origin,
   10        url: window.location.origin + url
   11      });
   12    };
   13    router.events.on('routeChangeComplete', handleRouteChange);
   14    return () => {
   15      router.events.off('routeChangeComplete', handleRouteChange);
   16    };
   17  }, [router]);

7. Set NEXT_PUBLIC_ANALYTICS_WRITE_KEYClick to copy environment variable in your .env file that has the write key from the step earlier.

Step 4: activating Segment Profile API with Next.js

1. Install Axios library for data fetching with npm install axiosClick to copy this is needed since standard fetchClick to copy has trouble parsing the response from Profile API.
2. Create a traits.tsClick to copy file under /pages/apiClick to copy with the following contents:

   Copy to clipboard

   1import type { NextApiRequest, NextApiResponse } from 'next';
   2import axios from 'axios';
   3
   4export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   5  const segmentSpaceId = process.env.SEGMENT_SPACE_ID!;
   6  const segmentApiKey = process.env.SEGMENT_API_KEY!;
   7  const nextCookies = req.cookies;
   8  const ajs_anonymous_id = nextCookies.ajs_anonymous_id;
   9  const url = `https://profiles.segment.com/v1/spaces/${segmentSpaceId}/collections/users/profiles/anonymous_id:${ajs_anonymous_id}/traits`;
   10  const basicAuth = Buffer.from(segmentApiKey + ':').toString('base64');
   11  axios
   12    .get(url, {
   13      headers: {
   14        Authorization: `Basic ${basicAuth}`
   15      },
   16    })
   17    .then(response => {
   18      res.status(200).json(response.data);
   19    })
   20    .catch(function (error) {
   21      res.status(error.response.status).json({
   22        error,
   23      });
   24    });
   25}

   This function retrieves the current segment anonymous id from cookies and passes it to Profile API along with basic authorization credentials.
3. Retrieve Segment space ID and access token according to the official docs here and add those as Segment environment variables to your .env file:

   Copy to clipboard

   1SEGMENT_SPACE_ID=
   2SEGMENT_API_KEY=

Step 5: integrating Segment with Uniform Tracker

1import { useEffect } from 'react';
2import { useUniformContext } from '@uniformdev/context-react';
3
4const TrackerScoreSync = () => {
5  const { context } = useUniformContext();
6  useEffect(() => {
7    const fetchTraits = async () => {
8      const response = await fetch('/api/traits');
9      const { traits } = await response.json();
10      await context.update({
11        quirks: {
12          ...traits,
13        },
14      });
15    };
16    fetchTraits();
17  }, [context]);
18  return null;
19};
20
21export default TrackerScoreSync;

Step 6: activate edge personalization mode

Let’s see it in action

Next steps