How to Properly Utilize "DataLayer"

Data collection and tags
1

I’m trying to add Piwik PRO to a website created with Vue 3.

I’m using the dataLayer and custom tags to track events according to this guide: How to Track SPAs

My problem is that the last click gets counted and logged multiple times when I click anywhere on the site. (Even on blank spaces around the site.)

image

I’m sure that I’ve only pushed to the dataLayer once but I can only upload one screenshot right now.

Thank you for any response and/or assistance!

2

Hi @marvinisaac,

could you share your current configuration? Mentioned article mentions 3 different ways to approach the setup. I suspect that you have a click condition instead of a more reliable History change (SPA).

3

Hi @kuba ,

I followed the last part, the one about using the data layer. This link should take you directly to that part.

Here is the tag’s event condition:

image
image1247×542 15 KB

The events I want to track all happen inside the same page that’s why I can’t use the history change trigger.

4

Hi @kuba ,

So I just looked at the reports from my testing yesterday. Is this the expected behavior?

image
image1546×462 26.8 KB

I mean, are events really tracked multiple times but there’s also a unique count?

5

Please check the tag manager debug mode. It’s a tool that allows you to check all the datalayer events that are published after each action. Then, within the tag manager UI, you can decide which events you want to subscribe to to fire your tags.

Generally, while setting up SPA tracking, I’d start with setting up standard page view events. So, each time the screen reloads, you trigger a virtual page view tag (it’s one of the templates available from within the product). For a virtual page view tag, you can set the page title and url. As a trigger you push to the data layer a new event that in the payload contains the url and page title. Alternatively, you can read these information on the fly by using tag manager variables (e.g. page URL is available already as a built in variable).

6

In general, I’d follow this guide. There is however one difference - instead of a history change trigger, you have to configure a datalayer event there.