Circular JSON in Magento 2 checkout, with KnockoutJS and in combination with Cloudflare Zaraz

We are currently evaluating different tracking tools, and see problems with the Piwik Pro-pushed data layer in combination with KnockoutJS in a Magento 2 shop.

We are getting the following error in the Sentry bug monitoring tool.

As per our analysis, somewhere in the Piwik Pro code, the DOM element seems to be pushed to the data layer, which is later tried to serialize.

Due to the use of KnockoutJS in the Magento checkout there is are ko… Objects attached to each element which are very complex and contain circular references. The full payload seems to be ~ 1.3MB.

is there are way to avoid such objects to be pushed to the datalayer by Piwik pro?

The problem does not seem to be appear in GTM.

Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'UiClass'
    |     property 'containers' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'UiClass'
    |     property '_elems' -> object with constructor 'Array'
    --- index 0 closes the circle
    at JSON.stringify (<anonymous>)
    at s.js?z=x:3:180
    at new Promise (<anonymous>)
    at zaraz.track (s.js?z=redacted:1:1228)
    at zaraz._processDataLayer (s.js?redacted:5:1755)
    at Array.value (s.js?z=redacted:5:1972)
    at n.dataLayer.push (2223ca20-76de-4a2c-ab55-f18ccc97222d.js:7:157469)
    at Fy.b.push (gtm.js?id=GTM-xxxx:484:165)
    at Fy.b.push (js?id=G-xxxxx&l=dataLayer&cx=c:508:165)
    at HTMLDocument.listener (2223ca20-76de-4a2c-ab55-f18ccc97222d.js:7:60404)
    at HTMLDocument.sentryWrapped (helpers.ts:98:1)

Hi @alexm,

Are you referring to the click elements which are passed on click events? -
image

Have a great day! :slight_smile:

Yes exactly, this element contains lots of nested data from Knockout

Hey @alexm,

Can you please send me a link in a private message to the website where this can be tested?

Have a great day! :slight_smile:

Hey @alexm,

Our Tag Manager team has investigated this issue and it seems that you are using Cloudflare Zaraz which is causing the issue here. Its listening to all of our events being sent to the dataLayer and parse them with JSON.parse. Not all of our events are serialized and we don’t support Cloudflare Zaraz.

It seems that google events are also not serialized as we can see on the screenshot below -

Hey,

thanks for the investigation. So is Piwik Pro in generally not supported with Zaraz?

Alex