The script tag in NextJS is not properly loading the Amplitude library

Question

The script tag in NextJS is not properly loading the Amplitude library

I am facing an issue with loading events using Amplitude JS for tracking, despite having the correct code in place. Here is the code snippet that I used:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
          <Html lang="en">
                <Head>
                     <Script
                        async
                        key="amplitude"
                        src="/js/analytics/amplitude.js"
                    ></Script>

               </Head>
          </Html>

The amplitude.js file contains the necessary code to include Amplitude using their SDK in this manner:

(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-MBHPie4YFudCVszzJY9HtVPk9Gw6aDksZxfvfxib8foDhGnE9A0OriRHh3kbhG3q"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-8.16.1-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){console.log(
"[Amplitude] Error: could not load SDK")}};var s=t.getElementsByTagName("script"
)[0];s.parentNode.insertBefore(r,s);function i(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this};var a=["add","append","clearAll",
"prepend","set","setOnce","unset","preInsert","postInsert","remove"];for(
var c=0;c<a.length;c++){i(o,a[c])}n.Identify=o;var l=function(){this._q=[]
;return this};var u=["setProductId","setQuantity","setPrice","setRevenueType",
"setEventProperties"];for(var p=0;p<u.length;p++){i(l,u[p])}n.Revenue=l;var d=[
"init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut",
"setVersionName","setDomain","setDeviceId","enableTracking",
"setGlobalUserProperties","identify","clearUserProperties","setGroup",
"logRevenueV2","regenerateDeviceId","groupIdentify","onInit","onNewSessionStart"
,"logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId",
"getDeviceId","getUserId","setMinTimeBetweenSessionsMillis",
"setEventUploadThreshold","setUseDynamicConfig","setServerZone","setServerUrl",
"sendEvents","setLibrary","setTransport"];function v(t){function e(e){
t[e]=function(){t._q.push([e].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){e(d[n])}}v(n);n.getInstance=function(e){e=(
!e||e.length===0?"$default_instance":e).toLowerCase();if(
!Object.prototype.hasOwnProperty.call(n._iq,e)){n._iq[e]={_q:[]};v(n._iq[e])}
return n._iq[e]};e.amplitude=n})(window,document);

amplitude.getInstance().init("YOUR_API_KEY_HERE")

Interestingly, when I use the normal script tag, it works perfectly fine.

javascript next.js amplitude-analytics

Answer 1

Answer №1

If you want to add a <Head> tag to any page, it can be done easily without the need to modify the _document or App. Next.js provides a built-in component for appending elements to the head of the page, which you can find more information about here.

Dealing with scripts in Next.js can sometimes be tricky. One solution is to use the useEffect() hook inside your component to dynamically load and render scripts:

     useEffect(() => {
      
      const srcUrl = `/js/analytics/amplitude.js`;
      
      const s = document.createElement('script');
          const addScript = src => {
            s.setAttribute('src', src);
            s.setAttribute('async', 'async');
            s.setAttribute('defer', 'defer');
            s.setAttribute('id', 'specific_id')
            document.body.append(s);
            s.remove()
          };
        addScript(srcUrl)


      
    },[]);

Alternatively, you can include static scripts in the App component itself:

const App = ({ Component, pageProps }) => (
  <>
    <Script
      src="/js/analytics/amplitude.js"
      strategy="beforeInteractive"
    />

    <Component {...pageProps} />
  </>
);

Answer 2

If you want to add a <Head> tag to any page, it can be done easily without the need to modify the _document or App. Next.js provides a built-in component for appending elements to the head of the page, which you can find more information about here.

Dealing with scripts in Next.js can sometimes be tricky. One solution is to use the useEffect() hook inside your component to dynamically load and render scripts:

     useEffect(() => {
      
      const srcUrl = `/js/analytics/amplitude.js`;
      
      const s = document.createElement('script');
          const addScript = src => {
            s.setAttribute('src', src);
            s.setAttribute('async', 'async');
            s.setAttribute('defer', 'defer');
            s.setAttribute('id', 'specific_id')
            document.body.append(s);
            s.remove()
          };
        addScript(srcUrl)


      
    },[]);

Alternatively, you can include static scripts in the App component itself:

const App = ({ Component, pageProps }) => (
  <>
    <Script
      src="/js/analytics/amplitude.js"
      strategy="beforeInteractive"
    />

    <Component {...pageProps} />
  </>
);

The script tag in NextJS is not properly loading the Amplitude library

Answer №1

Similar questions

Disrupting a Program Operation

Encountering difficulties when trying to send requests to an API through AJAX

The dynamic parameter in Next.js route is not defined

Joining Two Texts in HTML with a Link Embedded within

Error: Unable to locate 'v8' in NextJS when using Twin Macro

JavaScript Ext is not declared

Updates to Firebase data do not automatically reflect in Google Charts

Refresh the dataTable once all external data has been successfully fetched

Modification of a CSS element

Is there a way in Python to translate JavascriptSerializer into a datetime object?

Displaying a Dynamic Loading Animation While Making an AJAX Call with jQuery

What is the best way to find out if multiples of a specific time interval can evenly divide the time between two

Learn how to efficiently apply styles to multiple objects within an array using the material-ui library

Before inserting a string into JSON in PHP, the length of the string should be included

Creating distinctively tinted vertices for every subdivision step is simple with the following technique

What is the best way to split a semicircular border radius in two equal parts?

Upon clicking the button, provide the client with the Cloudinary link

What is the best way to expand a div in a downward direction exclusively?

Modify the color of a div element in React when it is clicked on

Comparing defaultProps with the logical OR operator