Unable to install a container into NextJS Project

[kentran]

I am trying to integrate Piwik Pro into my NextJS project but received the ** TypeError: (intermediate value)(…) is not a function** error.

I included the installation script with NextJS Script tag as follows

<Script
            dangerouslySetInnerHTML={{
                __html: `              
                    (function(window, document, dataLayerName, id) {
                      window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
                      function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString()}document.cookie=a+"="+b+d+"; path=/"}
                      var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
                      var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
                      tags.async=!0,tags.src="https://kentran.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
                      !function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
                    })(window, document, 'dataLayer', '106aa643-d79c-4201-b52f-ed2f355af107');
                `
            }}
        />   

Please help to check!

[Piotrek]

Hello @kentran,

We previously saw that in cases like this, following this general guide for implementing analytics (like GA) helps.

Also, could you try following some of the ideas and tips provided in this thread?

Let us know if that helps. We will also create a feature request for us to provide some dedicated documentation for NextJS in the near future.

[kentran]

Dear @Piotrek,

Thanks for your response.
I went through the guide and thread but unfortunately, it couldn’t help to resolve the issue.
The reason is this error came from the script that loaded from your backend, not from the configure container tag

[leevi978]

I have this exact same issue when I try to add this script tag in my Gatsby project. Maybe Piwik-pro should work on a guide for using the tool with server-side rendered pages? @Piotrek

[Pawel]

Hi! Our developer has found a potential solution:
Setting id on the Script element with inline code as recommended in the Next.js docs (link) has resolved the issue in our test setup. Could you try this solution and let us know if this has helped in your case?

[kentran]

Hi Pawel.
I tried setting the id to the Script component but the same error still occurred.
Would you please check again with your team?

[Piotrek]

Hello @kentran,

This is Piotr from the Data Collection & Integrations team. We wanted to let you know that we are soon going to release a dedicated Piwik PRO library for NextJS. We are planning to release it in the next couple of weeks. Once it’s out, I’ll update this thread with a link. Stay tuned!

[Piotrek]

@kentran

The tracking library for NextJS is ready and we have released it on our NPM:

@piwikpro/next-piwik-pro