How to Add Jeeva's Script to Next.js

To integrate your Jeeva tracking script across every page of your Next.js application, ensuring it loads as users navigate your site, you can use the _app.js file for a global application or the next/head component to inject it into the <head> section of your HTML document. Here, we’ll guide you through both methods, allowing you to choose the best fit for your needs.

Using _app.js for Site-wide Script Execution

You can include the script directly within the _app.js file using the useEffect hook to ensure it executes once when the app component mounts. This method is ideal for scripts that don’t need to manipulate the DOM immediately or rely on being present in the <head>.

/ pages/_app.js
import { useEffect } from 'react';function MyApp({ Component, pageProps }) {
 useEffect(() => {
   // Directly adding your script content here
   !function () {
     var jeeva = window.jeeva = window.jeeva || [];
     if (jeeva.invoked) return;
     jeeva.invoked = true;
     jeeva.methods = ["identify", "collect"];
     jeeva.factory = function (method) {
       return function () {
         var args = Array.prototype.slice.call(arguments);
         args.unshift(method);jeeva.push(args);
         return jeeva;
       };
     };
     for (var i = 0; i < jeeva.methods.length; i++) {
       var key = jeeva.methods[i];
       jeeva[key] = jeeva.factory(key);
     }
     jeeva.load = function (key) {
       var script = document.createElement("script");
       script.type = "text/javascript";
       script.async = true;
       script.src = "https://s3-us-west-2.amazonaws.com/b2bjsstore/b/" + key + "/jeeva.js.gz";
       var first = document.getElementsByTagName("script")[0];
       first.parentNode.insertBefore(script, first);
     };
     jeeva.SNIPPET_VERSION = "1.0.1";
     jeeva.load("YOUR-UNIQUE-ID");
   }();
 }, []);  return <Component {...pageProps} />;

Using next/head for <head> Injection

If you need the script to be part of the document <head>, or if it must execute as part of the HTML rendering process, you can inject it using next/head. This method is useful for scripts that affect the initial rendering or need to be indexed by search engines.

// pages/_app.js
import Head from 'next/head';function MyApp({ Component, pageProps }) {
 return (
   <>
     <Head>
       <script dangerouslySetInnerHTML={{
         __html: `
           !function () {
             var jeeva = window.jeeva = window.jeeva || [];
             if (jeeva.invoked) return;
             jeeva.invoked = true;
             jeeva.methods = ["identify", "collect"];
             jeeva.factory = function (method) {
               return function () {
                 var args = Array.prototype.slice.call(arguments);
                 args.unshift(method);jeeva.push(args);
                 return jeeva;
               };
             };
             for (var i = 0; i < jeeva.methods.length; i++) {
               var key = jeeva.methods[i];
               jeeva[key] = jeeva.factory(key);
             }
             jeeva.load = function (key) {
               var script = document.createElement("script");
               script.type = "text/javascript";
               script.async = true;
               script.src = "https://s3-us-west-2.amazonaws.com/b2bjsstore/b/" + key + "/jeeva.js.gz";
               var first = document.getElementsByTagName("script")[0];
               first.parentNode.insertBefore(script, first);
             };
             jeeva.SNIPPET_VERSION = "1.0.1";
             jeeva.load("YOUR-UNIQUE-ID");
           }();
         `,
       }} />
     </Head>
     <Component {...pageProps} />
   </>
 );
}export default MyApp;

Notes

Replace "YOUR-UNIQUE-ID" with your actual unique ID provided by the service.
The useEffect hook in the first method ensures that the script runs once on the client side, which is typically what you want for scripts like these.
The dangerouslySetInnerHTML attribute is necessary to insert raw HTML inside the <script> tag using next/head. It’s called “dangerous” because it can expose your site to cross-site scripting (XSS). Ensure your script content is safe and trusted.