NextJS presents some small challenges compared to CMS implementations for installing the WTO tag. This brief article describes an easy approach to installing the WTO tag on NextJS applications.
Note: This document references a project which can be found at the following link on Github:
The environment
For this article, we have created an app using:
npx [email protected] myapp
The application settings used were:
Tailwindcss
App Router
/src folder
When running npm run dev you'll find an output similar to:
Test page before changes are made
This is the default nextjs welcome page:
Implementation steps
Finding your tagging guide
In the WTO UI, head to https://app.webtrends-optimize.com/optimize/guides/taggingGuide
On that page, you'll find your full tag script - copy it.
Edit your NextJS app
Find your layout.js script:
If you don't have a <head> tag, create one:
Paste in the tag copied from the WTO UI:
Modify the tag to look like this:
Note:
The tag changes from opening and closing tags to one self-closing tag.
We wrap the contents of the tag in a dangerouslySetInnerHTML attribute.
How to QA
Go to your web page
Right click and view-source
Look for the WTO script, and find the opening script tag - we want to make sure it's a plain script tag, with no additional attributes like async/defer added:
Make sure there are no new console errors
Look in the Network tab, and filter by "webtrends". We are looking for
wt.js
wt_lib.js
As long as these appear, we know everything will be fine with the rest of the settings being controlled in the WTO UI.
Note: If you see a wt.js call with a 302, this is likely because you are on a http:// local page - this will not affect users when you go live on a https:// page.
Frequently asked questions
Q: Does this allow for feature-flagging?
A: No, feature-flags are typically rendered using our server-side testing REST APIs. This guide is strictly for traditional client-side AB Testing.
Q: Are there any considerations for hooking into page/state changes I need to think about as a website developer?
A: No, we hook into these changes in our tag, there is no additional work required on the website-end.