Unfortunately, React pages require additional setup beyond adding the VisiSmart script to function properly.
We have two methods:
FIRST (PREFERRED) METHOD
Purpose This script ensures that the Visiopt Smart Code reinitializes automatically whenever a React Single Page Application (SPA) changes its route without performing a full page reload. Unlike traditional page reloads, React updates the content dynamically through client-side routing, which prevents the Smart Code from reloading automatically. This script detects those route changes and forces a safe Smart Code re-execution, without modifying or re-injecting new scripts into the DOM.
Full React Specific Script
<script> (function(){function r(){try{if(window.visiopt_code){delete window.visiopt_code;delete window.visiopt_code_status;}const e=document.querySelectorAll("script");for(let t of e){const e=t.innerText||"";if(e.includes("window.visiopt_code")){eval(e);return!0}}return!1}catch(e){return!1}}function o(){let e=0;const t=setInterval(()=>{e++;(r()||e>10)&&clearInterval(t)},1e3)}let e=location.pathname;const t=new MutationObserver(()=>{location.pathname!==e&&(e=location.pathname,o())});t.observe(document.body,{childList:!0,subtree:!0});})(); </script>
Placement
It’s recommended to place this script inside the <head> tag of your React entry page.
Example: <head> <script>/* Insert this code here */</script> </head>
This ensures that it starts observing DOM changes as soon as the first React page renders.
Note : This is an additional script that needs to be added along with our VisiSmart code to the page.
Important for React Pages
Some React-based pages are coded to perform an automatic page refresh after loading.
This can disrupt tracking accuracy and cause duplicate conversions.
Recommended Action: Test each React page to see if it automatically refreshes after load. If it does, update your conversion pages to record unique conversions only
To do so, click on the "actions" dropdown below the page thumbnail in the funnels page, and select "Record unique conversions only":
SECOND METHOD (use if the previous method won't work)
Here we show you how to add VisiSmart Code to a single React page framework. These steps are only required if your React page loads different URLs from the same page.
If your site uses React but each page is a separate URL then these steps are not necessary.
1. Before beginning, collect all of the URLs that are loaded from your React Page.
2. Add these URLs to Visiopt using our standard instructions. Be sure to save the proper code for each URL in a text document for use in the following steps.
3. Download the zip file given below and unzip it in your component's folder.
We have provided a custom component that needs to be added to the React website and use it instead of general smart code: https://visiopt.com/react/TrackingCode.ziP
4. Now call the above component in the page you want to track. You can see below how to call the component.
Here is the code used in the screenshot above:
To import components, use:
Import TrackingComponent from "../TrackingCode";
To use components add:
<TrackingComponent siteId="319" pageId="269" />
Make sure you change siteID and pageID as per your page URL.
This component needs to be called for each page of the funnel, so be sure to place this code for each URL being called.
5. Now that the code is added, you can add your URLs to a funnel.
Visiopts Validation System will not allow you to add the pages, because the VisiSmart script is not in its normal format on the page. Please request a Visiopt representative turn off the validation while you add the pages to the funnel.
Add each URL as a separate page into the Visiopt funnel, then ask the representative to turn back on validation.
6. Be sure to test as shown in Visiopt instructions to ensure everything is tracking properly. We do this by setting up a simple single-variable test.
Comments
0 comments
Article is closed for comments.