Dynamically add a variable to an external js script with NextJS

Asked By: Anonymous

I have this external hotjar script inside /static/js of my nextjs application.

(function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:<SITEID>,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

I have imported this file into my app from inside the Head section of _document.js like so:
http://'/js/hotjar.js'

Problem:
My Nextjs app is currently running on a staging and live environment and I would like to add a script for both. The only dynamic part of the script above is the SITEID value here h._hjSettings={hjid:<SITEID>,hjsv:6};. How can I add different SITEIDs for different environments inside a config file and dynamically change this value since this script runs on the client side?


Solution

Answered By: Anonymous

Edit:
you can use react-hotjar and simply

import { hotjar } from 'react-hotjar'; 
hotjar.initialize(hjid, hjsv);// Hotjar ID  and Hotjar Snippet Version 

Otherwise You have 2 options:

Option 1
first make sure your package.json start script will set enviroment variable, something like this :

  "scripts": {
    ...
    "start": "cross-env NODE_ENV=production node server.js",
    ...
  }

Then create 2 hotjar sripts, lets say /js/prod_hotjar.js and /js/staging_hotjar.js which have appropriate SITEID inside.
Then in your _document.js detect the current enviroment, and render the appropriate script with something like this :

import Document, { Html, Head, Main, NextScript } from 'next/document'
const prod= process.env.NODE_ENV === 'production'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    const url = prod ?  "/js/prod_hotjar.js" : "/js/staging_hotjar.js"
    return (
      <Html>
        <Head>
        http://url
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Option 2
Use dangerouslySetInnerHTML with something like this :

import Document, { Html, Head, Main, NextScript } from 'next/document'
const dev = process.env.NODE_ENV === 'production'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    const SITEID = prod ?  1234 :  4567 // or any other logic
    return (
      <Html>
        <Head>
        <script dangerouslySetInnerHTML={{__html: `(function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:${SITEID},hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
       })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`}} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno