Using RightMessage with Single Page Applications (SPAs)

Understanding the Challenge

Single Page Applications (SPAs) handle page transitions differently from traditional websites. Since they don't trigger actual page reloads, RightMessage needs to be manually notified when route changes occur.

Core Solution

The key to making RightMessage work with SPAs is using the reset method:

RM.push(['reset'])

This tells RightMessage to treat the route change as a new page load.

Framework-Specific Implementation

Next.js

// pages/_app.js or similar
import { useEffect } from 'react'
import { useRouter } from 'next/router'

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  
  useEffect(() => {
    router.events.on('routeChangeComplete', () => {
      window.RM.push(['reset'])
    })
  }, [router])
  
  return <Component {...pageProps} />
}

Vue.js

// router setup
router.beforeEach((to, from, next) => {
  window.RM.push(['reset'])
  next()
})

React Router (v6+)

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

function App() {
  const location = useLocation()

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

  return (
    // Your app components
  )
}

React Router (v5)

// Class Component approach
class App extends Component {
  componentDidMount() {
    this.props.history.listen(() => {
      window.RM.push(['reset'])
    })
  }
}

// OR using withRouter HOC
export default withRouter(App)

Angular

// app.component.ts
import { Router, NavigationEnd } from '@angular/router'
import { filter } from 'rxjs/operators'

@Component({...})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      window.RM.push(['reset'])
    })
  }
}

Troubleshooting Tips

1. Verify RightMessage script is loaded before calling reset
2. Check browser console for errors
3. Test personalization after route changes
4. Monitor network requests to ensure tracking works