How to Embed Jeeva's Script into a React.js Application

Integrating Jeeva's tracking script into a React.js application is essential for ensuring comprehensive site tracking. Here’s a step-by-step guide on how to achieve this, whether your script needs to be in the document body or the head section.

Using useEffect in Your Main App Component

If your script doesn’t need to be part of the document's head section, you can use the useEffect hook to run the script when your component mounts. This method is perfect for scripts that operate from the body of your document.

Step-by-Step Implementation:

Step 1: Open Your Main Component (App.js)

Step 2: Add the useEffect Hook

/ App.js or your top-level component
import React, { useEffect } from 'react';

function App() {
 useEffect(() => {
   // Your custom JavaScript snippet
   !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/jeevajsstore/j/" + 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 (
   // Your app's component tree
   <div className="App">
     {/* Your components */}
   </div>
 );
}

export default App;

Using react-helmet for Head Section Modifications

If the script needs to be part of the document’s head section, react-helmet is a powerful library that allows dynamic management of the head contents.

Step-by-Step Implementation:

Step1: Install react-helmet

npm install react-helmet

Step 2: Modify Your Main Component

// App.js or your top-level component
import React from 'react';
import { Helmet } from 'react-helmet';

function App() {
 return (
   <div className="App">
     <Helmet>
       <script>
         {`
           <script>
 ! 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://r2d2-inbound-js-store-staging.s3.us-east-1.amazonaws.com/' + key + '/jeeva.js';
     var first = document.getElementsByTagName('script')[0];
     first.parentNode.insertBefore(script, first);
   };
   jeeva.SNIPPET_VERSION = '1.0.';
   jeeva.load('YOUR-UNIQUE-ID');
 }();
</script>
     </Helmet>
     {/* Your components */}
   </div>
 );
}

export default App;

Final Notes

Make sure to replace "YOUR-UNIQUE-ID" with your actual unique ID provided by Jeeva.

By following these methods, you can ensure that the Jeeva tracking script is effectively integrated into your React.js application, either within the body using useEffect or within the head section using react-helmet.