# How to Properly Utilize "DataLayer"

**URL:** <https://community.piwik.pro/t/how-to-properly-utilize-datalayer/282>\
**Category:** Data collection and tags\
**Created:** [September 29, 2021, 2:03pm UTC](https://community.piwik.pro/t/how-to-properly-utilize-datalayer/282 "2021-09-29T14:03:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![marvinisaac](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/marvinisaac/32/128_2.png) [@marvinisaac](https://community.piwik.pro/u/marvinisaac)\
**Post date:** [September 29, 2021, 2:03pm UTC](https://community.piwik.pro/t/how-to-properly-utilize-datalayer/282/1 "2021-09-29T14:03:35Z")

</div>

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](https://piwik.pro/blog/how-to-track-single-page-applications-spas/#data-layer)

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](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/e68c826a5acf3036f5f4de2e971fb2a4728ee461.png)

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!

---

<div class="post-metadata">

**Author:** ![kuba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kuba/32/7_2.png) [@kuba](https://community.piwik.pro/u/kuba)\
**Post date:** [September 29, 2021, 2:41pm UTC](https://community.piwik.pro/t/how-to-properly-utilize-datalayer/282/2 "2021-09-29T14:41:46Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![marvinisaac](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/marvinisaac/32/128_2.png) [@marvinisaac](https://community.piwik.pro/u/marvinisaac)\
**Post date:** [September 30, 2021, 12:13pm UTC](https://community.piwik.pro/t/how-to-properly-utilize-datalayer/282/3 "2021-09-30T12:13:18Z")

</div>

Hi @kuba ,

I followed the last part, the one about using the data layer. [This link](https://piwik.pro/blog/how-to-track-single-page-applications-spas/#data-layer) should take you directly to that part.

Here is the tag’s event condition:

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/70d5eebd913406e1601297d95168a12036edfd77.png)

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

---

<div class="post-metadata">

**Author:** ![marvinisaac](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/marvinisaac/32/128_2.png) [@marvinisaac](https://community.piwik.pro/u/marvinisaac)\
**Post date:** [September 30, 2021, 12:53pm UTC](https://community.piwik.pro/t/how-to-properly-utilize-datalayer/282/4 "2021-09-30T12:53:07Z")

</div>

Hi @kuba ,

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

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/ad717270b7d6faec490adebaca1260fa6965acfe.png)

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

---

<div class="post-metadata">

**Author:** ![kuba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kuba/32/7_2.png) [@kuba](https://community.piwik.pro/u/kuba)\
**Post date:** [September 30, 2021, 2:22pm UTC](https://community.piwik.pro/t/how-to-properly-utilize-datalayer/282/5 "2021-09-30T14:22:48Z")

</div>

Please check [the tag manager debug mode](https://help.piwik.pro/support/getting-started/check-tracking/#use-debug-mode-in-tag-manager-). 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).

---

<div class="post-metadata">

**Author:** ![kuba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kuba/32/7_2.png) [@kuba](https://community.piwik.pro/u/kuba)\
**Post date:** [September 30, 2021, 2:24pm UTC](https://community.piwik.pro/t/how-to-properly-utilize-datalayer/282/6 "2021-09-30T14:24:38Z")

</div>

In general, I’d follow [this guide](https://help.piwik.pro/support/advanced-solutions/how-can-i-track-a-single-page-application/). There is however one difference - instead of a history change trigger, you have to configure a datalayer event there.
