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:
@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');
`,
}}
/>
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>
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!
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’?
