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’?
Search our community by clicking on the search icon on top-right
Still stuck? Post your question and we’ll be happy to help.
English
Dutch
English
Finnish
German
Polish
Portuguese
Spanish
Privacy settings
We'd like to collect your browsing data to analyze traffic, fix bugs and make our site better. You can always change your settings on our privacy policy page.