How to prevent HTML encode the ' character in NextJs _document.js file

I am trying to implement VWO into my website following the steps here and I have added the script tag inside of a NextJs Head tag like bellow:

  <Head>
          <script type='text/javascript' id='vwoCode'>
            {`window._vwo_code=window._vwo_code || (function() {
            var account_id= SOME_ID,
            version=11,
            settings_tolerance=1,
            library_tolerance=1,
            use_existing_jquery=false,
            is_spa=1,
            hide_element='body',
            /* DO NOT EDIT BELOW THIS LINE */
            f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery},library_tolerance:function(){return library_tolerance},finish:function(){if(!f){f = true;var e=d.getElementById('_vis_opt_path_hides');if(e)e.parentNode.code.init();return code;}());`}
          </script>
        </Head>

the issue is the quotes "'" are getting encoded by HTML into ' so for example the hide_element='body', is converted into hide_element='body', which is why I am facing an error.

how can I fix this issue? any suggestion?

Solution

You need to import "Script" module and use "window._vwo_code" wherever you have accessed "_vwo_code" directly. You can use the below code snippet and use your VWO account ID in the code for "var account_id".

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script
          id='vwoCode' 
          strategy="beforeInteractive">
          {`window._vwo_code=window._vwo_code || (function() {
            var account_id=YOUR_ACCOUNT_ID,
            version=1.3,
            settings_tolerance=2000,
            library_tolerance=2500,
            use_existing_jquery=false,
            is_spa=1,
            hide_element='body',
            /* DO NOT EDIT BELOW THIS LINE */
            f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery},library_tolerance:function(){return library_tolerance},finish:function(){if(!f){f=true;var e=d.getElementById('_vis_opt_path_hides');if(e)e.parentNode.removeChild(e)}},finished:function(){return f},load:function(e){var t=d.createElement('script');t.fetchPriority='high';t.src=e;t.type='text/javascript';t.innerText;t.onerror=function(){window._vwo_code.finish()};d.getElementsByTagName('head')[0].appendChild(t)},init:function(){window.settings_timer=setTimeout(function(){window._vwo_code.finish()},settings_tolerance);var e=d.createElement('style'),t=hide_element?hide_element+'{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}':'',i=d.getElementsByTagName('head')[0];e.setAttribute('id','_vis_opt_path_hides');e.setAttribute('nonce',document.querySelector('#vwoCode').nonce);e.setAttribute('type','text/css');if(e.styleSheet)e.styleSheet.cssText=t;else e.appendChild(d.createTextNode(t));i.appendChild(e);this.load('https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&f='+ +is_spa+'&vn='+version);return settings_timer}};window._vwo_settings_timer = code.init();return code;}());
          `}
          </Script>
      </body>
    </Html>
  )
}