Error with NextJS setup

[Stephane_Piette]

Hello,

I am trying to setup Piwik into a NextJS project (react frontend framework).
I am trying to import the Javascript like this:

<Script strategy="lazyOnload">
              {`
                (function(window, document, dataLayerName, id) {
                [...]
                })(window, document, 'dataLayer', 'XXXX_XXX_XXXX_XXX');
              `}
</Script>

But there is an error when I run the code:

SyntaxError: missing } after property list

I have also tried that without result:

<Script
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: [....]}}></Script>

The snippet works when I ran it into a simple dummy html file, but no way to make it work with NextJS.

Any feedback on that ?
Thanks

[Roman_Sek]

It looks like a typo in JS code you are not showing in the example. Try using NextJS example for google analytics as a base (link) and replace both of the “Script” tags in the “_app.js” file with following tag:

  <Script
    id="piwik-init"
    strategy="afterInteractive"
    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="//XXXX.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', 'XXXX-XXXX-XXXX-XXXX-XXXX')
        `,
    }}
  />

[Stephane_Piette]

@Roman_Sek that did not fix anything; I had the same code but did not work.

But I managed to solve the issue somehow: I copied the javascript code into JS file and properly formatted the code. I then put this formatted code as the __html attribute, and then it worked.

Maybe there is a problem with the minified JS being read by typescrip/nextjs or whatnot.

So this worked:

<Script
              id="piwik-init"
              strategy="afterInteractive"
              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://troedelspende.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', 'XXXXXX');
            `,
              }}
            />

[anthonybartczak]

Hi!

One additional way that works for me is to install the Piwik PRO container via the _document.js/ts/jsx/tsx file. You can add it to the tag (async container) or tag (sync container) like this:

<script
  dangerouslySetInnerHTML={{
    __html: `insert you container code here`,
  }}
></script>

[Piotrek]

Hello @Stephane_Piette,

This is Piotr from the Data Collection & Integrations team, I have some news to share.

We have developed a brand new dedicated tracking library for NextJS and we will be releasing it in the next couple of weeks. Once it’s out, you will be able to use a dedicated solution for Piwik PRO in your NextJS projects. I’ll update this thread when that happens. Stay tuned!

[jfrisby]

Any update on the Next.js integration?

[Piotrek]

@jfrisby @Stephane_Piette

Good news! The library for NextJS is ready and we have released it on our NPM:

@piwikpro/next-piwik-pro

[Dominik_Goss]

Hi @Piotrek, the idea with NPM library for NextJS is great.
I did try it and now I trying to figure out to use it also with NextJS Metadata on layout.tsx

When I mark the layout.tsx as ‘use client’ to work with PiwikPro provider than I can not set meta globally

Do you or your team have any idea how can I use your library without setting main layout.tsx as ‘use client’?

[anthonybartczak]

Hi @Dominik_Goss,

We’ll look into this and get back to you .

[anthonybartczak]

Hi @Dominik_Goss,

We’ve introduced some changes that should remove the need of using use client.
You can check our example app too:

next-piwik-pro/example at master · PiwikPRO/next-piwik-pro