Custom Events not triggered

[fxmb]

1. I have added the pirsch-extended.js script to my head like so:

       <script
            defer
            type="text/javascript"
            src="https://api.pirsch.io/pirsch-extended.js"
            id="pirschextendedjs"
            data-code="My_APP_ID"
          ></script>

2. I add my custom events and they are displayed in the rendered html like so:

<button pirsch-event="Add to Cart Button Clicked" pirsch-meta-manufacturer="ABC" pirsch-meta-article="DEF" class="">Test Pirsch</button>

=> I get nothing in the local console => Nothing arrives in prod => I can see that the extended script loads correctly because we see customer download in production (which is only possible with the extend script according to the docs).

What are we missing?

Stack: React Nextjs Tailwind

[Kugelschieber]

Hi,

the most likely reason is that the script is executed before the elements have been rendered by react. The extended script looks for any elements on the page that have the pirsch-event attribute and attaches an event listener to it. It takes a while until react has rendered the page, and since the script is only executed once, no handlers will be added.

I would recommend using the SDK for SPAs: https://github.com/pirsch-analytics/pirsch-js-sdk

This way you can send events from react and don't run into any weird timing issues.

[Kugelschieber]

@fxmb did you find a solution to your issue?

[fxmb]

No this still does not work... the JS client also does not work. Pretty frustrating since we are paying customers and just follow the docs... Plausible just works out of the box...

[OD91]

I tried the JS SDK Client Side but also does not work for me unfortunately: #https://github.com/pirsch-analytics/pirsch-js-sdk/issues/23 is the issue I opened.

[Kugelschieber]

@fxmb can you please try upgrading to 2.4.1? npm i pirsch-sdk@2.4.1. Also, please note that working with the SDK locally isn't really supported, in case that's what you're trying currently. On localhost, we recommend just logging events instead of calling pirsch.event(...) and pirsch.hit(...).

In case you still don't see the data appearing on your dashboard, please ensure that your domain matches the one configured on the Pirsch dashboard. www.example.com and example.com are different domains to us, and we check the domain + identification code to ensure nobody sends data to your dashboard from a different domain.

You can also find a new SDK web demo here: https://github.com/pirsch-analytics/demo/tree/master/js-sdk-web

[OD91]

Ok,

1. I've updated it to npm i pirsch-sdk@2.4.1.
2. Still get the error Identification code not found. Make sure it is correct and you're sending requests for the right domain or subdomain.
3. Where do you set the domain in your code?

[Kugelschieber]

The hostname can be used to rewrite the URL, which has to match the domain configured on the Pirsch dashboard. Otherwise, it's optional.

See: https://github.com/pirsch-analytics/pirsch-js-sdk/issues/23#issuecomment-1745204331

[Kugelschieber]

Closing this. Let me know if you need further help. We can do a quick call if needed :+1: