Skip to main content

Uniform Optimize Nuxt module

Optimize Deprecation

Uniform Optimize has been deprecated and replaced by Context, a more powerful and flexible personalization solution. Optimize is not being discontinued at this time, but it will not receive updates or new features.

We do not recommend starting a new project with Optimize. If you have an existing project that uses Optimize, you can upgrade your project to Context at no cost using our upgrade guide. If you have any issues with this process you can contact our team.

This guide will build upon Getting Started with Uniform Optimize, which discusses setting up the packages inside your project and initializing a default version of your project's tracker. Please complete the steps in that guide before proceeding through this one.

The Uniform Optimize Nuxt module provides an easy setup to get you started with personalization. It creates the trackerInstance for you based on the options you give to the module. It also injects $uniformOptimize and if configured $uniformOptimizeAnalytics into the Nuxt context.

tip

Make sure to read Getting Started with Vue, Personalizing with Vue and Behavior Tracking so you understand how to use the Nuxt module once installed. Feel free to have a look at the Nuxt Contentful Starter Kit.

info

The Optimize Nuxt module also makes sure the Uniform tracker works in SSR mode. It will initialize it for you in both SSR and client.

Setup

npm install --save @uniformdev/optimize-nuxt
nuxt.config.js
export default {
modules: ['@uniformdev/optimize-nuxt'];
}

Options

nuxt.config.js
export default {
modules: ['@uniformdev/optimize-nuxt'],

optimize: {
// options
},
};

Properties

intentManifestPath

  • type: string
  • default: '/static/intentManifest.json'

Use this option if your intentManifest.json file lives in a different place than the default ~/static folder. The module also searches the ~/src folder for a match.

trackerPath

  • type: string
  • default: '~/lib/uniform-optimize/tracker.js'

The tracker file holds the Uniform Optimize tracker that you configure. This way you have the most control over which plugins you add.

info

The module does not work if you do not add the tracker.js file.

The simplest example:

~/lib/uniform-optimize/tracker.js
import { createDefaultTracker } from '@uniformdev/optimize-tracker-browser';
import intentManifest from '~/static/intentManifest.json';

const localTracker = createDefaultTracker({
intentManifest,
});

export default localTracker;

A much more involved example:

~/lib/uniform-optimize/tracker.js
import { createDefaultTracker } from '@uniformdev/optimize-tracker-browser';
import { addAnalyticsPlugin } from '@uniformdev/optimize-tracker-analytics';
import { indexedDbScopeStorage } from '@uniformdev/optimize-tracker-storage-indexeddb';
import { cookieScoringStorage } from '@uniformdev/optimize-tracker';

import Cookie from 'cookie-universal';
import intentManifest from '~/static/intentManifest.json';

// see code block below for '~/plugins/analytics.client.js'
import { analytics } from '../../plugins/analytics.client';

function createNuxtCookieStorage() {
const cookiesApi = Cookie();

const cookieStorage = cookieScoringStorage({
getCookie: (name) => {
const cookieValue = cookiesApi.get(name, { parseJSON: false });
return cookieValue;
},

setCookie: (name, value) => {
if (typeof window === 'undefined') {
return;
}

cookiesApi.set(name, value, {
maxAge: 30 * 24 * 60 * 60,
path: '/',
sameSite: 'strict',
secure: window.location.protocol === 'https:',
});
},
});

return cookieStorage;
}

const localTracker = createDefaultTracker({
intentManifest,
logLevelThreshold: 'info',
analyticsaddPlugins: [addAnalyticsPlugin({ analytics })],
storage: {
scopes: indexedDbScopeStorage({
scoringStorage: createNuxtCookieStorage(),
}),
},
});

export default localTracker;
~/plugins/analytics.client.js
import { Analytics } from 'analytics';
import segmentPlugin from '@analytics/segment';
import googleAnalyticsPlugin from '@analytics/google-analytics';

const segmentKey = process.env.SEGMENT_ID || 'test';
const gaId = process.env.GA_UA_ID || 'test';

export const analytics = new Analytics({
app: 'Uniform Optimize Contentful Nuxt Starter',
debug: true,
plugins: [
segmentPlugin({
writeKey: segmentKey,
}),

googleAnalyticsPlugin({
trackingId: gaId,
customDimensions: {
strongestIntentMatch: 'dimension1',
allIntentMatches: 'dimension2',
},
}),
],
});

export default ({ app }, inject) => {
inject('uniformOptimizeTrackerAnalytics', analytics);
};