Your browser is out of date. The site might not be displayed correctly. Please update your browser.

Knowledge Base
Specialty Products
SplitSignal
Integration with React Applications

Integration with React Applications

Manual

Compatible React version is 16.3.0+

SplitSignal is a solution for SEO A/B testing. It enables users to change HTML on the websites and monitor the impact of these changes on the organic traffic.

SplitSignal integrates via JavaScript code snippet and applies test changes directly to the DOM elements. To correctly interact with Single-page application frameworks (e.g. React, Angular, Vue, etc.) we provide a dedicated integration. It uses browser events to determine when the application is rendered to apply the test changes.

Installation

  1. Go to https://www.semrush.com/splitsignal/
  2. Select your project from the list of projects or create a new one
  3. Click on the “Code” panel Integration with React Applications image 1
  4. Select tab Single-page application
  5. Take the snippet and install it on your website. The best place to put the snippet is the <head> tag, but you could integrate it via Google Tag Manager as well. The earlier it starts working the better. It is designed to not block page initialization.

Events dispatching

Using react-router:

 
import {useLayoutEffect, Fragment} from 'react'
import {useLocation} from 'react-router'
import {Router} from 'react-router-dom'
const LocationWatcher = ({children}) => {
	const location = useLocation()
	useLayoutEffect(
		() => {
			window.dispatchEvent(new Event('splitsignal.initialized'))
		},
		[location]
	)
	return <>{children}</>
}
export const Root = () =>  (
	<Router {...anyProps}>
		<LocationWatcher>
			{...}
		</LocationWatcher>
	</Router>
)

Debugging

To ensure that SplitSignal works correctly, please set the global variable window.SM_SPLITSIGNAL_DEBUG = true in your application.
When this variable is set, SplitSignal will write these debug messages to the console:

  • When SplitSignal script starts listening to events - “Initialize event invoked!” */initial-url*
  • When SplitSignal script consumes an event - “Initialize event invoked!” */another-url*
Manual
Show more
Recently viewed