How to use RightMessage with Single Page Applications (SPAs)

Overview

This guide explains how to use RightMessage with Single Page Applications (SPAs) and server-rendered frameworks like React, Vue.js, Svelte, Next.js, and Nuxt.js. Since these frameworks handle routing differently than traditional websites, you'll need to take an extra step to ensure RightMessage tracks page views and personalization campaigns correctly.

Prerequisites

A RightMessage account
Your website configured as an SPA or with a framework like Next.js or Nuxt.js
Access to your website's codebase

Before you begin

Incorrectly configuring the RightMessage script can lead to issues with tracking, segmentation, and personalization. Please follow these instructions carefully.

Steps

Install the RightMessage script: Add your unique RightMessage script to your site. The method varies depending on the framework.

Standard SPAs (React, Vue, Svelte)

Add the script to the <head> section of your main index.html file.

<!-- Your other head content -->
<script async src="https://YOUR_RIGHTMESSAGE_SCRIPT_URL.js"></script>

Next.js

In your root layout (app/layout.js or app/layout.tsx), use the next/script component.

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script async src="https://YOUR_RIGHTMESSAGE_SCRIPT_URL.js" />
    </html>
  )
}

Nuxt.js

In your nuxt.config.js or nuxt.config.ts file, add the script to the head.script array.

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: 'https://YOUR_RIGHTMESSAGE_SCRIPT_URL.js', async: true }
      ]
    }
  }
})

Trigger a reset on route changes: In your application's routing logic, you need to call RM.push(['reset']) whenever the route changes. This tells RightMessage to:

Track a new page view
Resegment the visitor based on the new page
Rerun all Flows and personalization campaigns

Here are examples of how to do this in popular frameworks:

React (with React Router)

In your main App component, use the useEffect hook to listen for route changes:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    if (window.RM) {
      window.RM.push(['reset']);
    }
  }, [location]);

  // ... your app logic
}

Next.js (App Router)

Create a client component that uses the `usePathname` and `useSearchParams` hooks. Include this component in your root layout.

'use client'
 
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
 
export function RightMessageProvider() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
 
  useEffect(() => {
    if (window.RM) {
      window.RM.push(['reset']);
    }
  }, [pathname, searchParams])
 
  return null
}

Then, in your app/layout.js, include this provider.

import { RightMessageProvider } from './RightMessageProvider'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <RightMessageProvider />
      </body>
    </html>
  )
}

Vue.js (with Vue Router)

In your router configuration, use a navigation guard:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  // ... your routes
});

router.afterEach((to, from) => {
  if (window.RM) {
    window.RM.push(['reset']);
  }
});

export default router;

Nuxt.js

Create a client-side plugin (e.g., plugins/right-message.client.js).

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.$router.afterEach((to, from) => {
    if (window.RM) {
      window.RM.push(['reset']);
    }
  })
})

Svelte (with SvelteKit)

In your main layout file (+layout.svelte), use the afterNavigate lifecycle function:

import { afterNavigate } from '$app/navigation';

afterNavigate(() => {
  if (window.RM) {
    window.RM.push(['reset']);
  }
});

Verify the setup

After implementing the changes, you can verify that everything is working correctly by:

Opening your website and navigating between different pages.
Checking your browser's developer console for any errors.
Confirming that page views and events are being tracked in your RightMessage dashboard.

If the setup is correct, you should see new page views being recorded in RightMessage every time you navigate to a new route in your application.

What's next

Getting help

If you have any questions or run into issues, please contact our support team.