Trigger for interaction (drag) with js element

Data collection and tags
1

I would really like to create a “custom event” for analytics when users interact with a javascript based element on my site. For this I need a trigger that fires on “js drag” or “js click”. Can this be done?

2

Hi,
A trigger that fires on these methods or a tag?

Regular clicks are tracked by default with the stg.click event which is generated when the visitor click on a button element on site. So, to trigger tags based on a click event from a button element you could simply create a tag that would have a click trigger attached to it. Here is a handy article on that: How to track button clicks | Piwik PRO help center

As for the trigger for the js drag method or if you wanted to track js click manually, you could set up a variable that gets its value whenever a visitor drags or clicks on something or in your code add a standard drag or click event listener that would check if the visitor performs an activity on an element on your site and then add a “trackEvent” method into the function. As soon as you add the method to your function, it should automatically fire a tag without the need of creating a dedicated trigger for that.

3

I was thinking a trigger to use for a Custom Event tag, but if I understand your suggestion correctly, it would work simply creating a Custom Code tag with something like this

<script>
  myDraggableThing.addEventListener('drag', function() {
    _paq.push(["trackEvent", "Navigation", "Drag", "My Draggable Thing"]);
});
</script>

where myDraggableThing is a variable defined in the “interactive” JS on my site.
Or am I misunderstanding something?

I prefer pushing the _paq.push from Tag Manager rather than from within the JS on my site, just to be on the safe side regarding consent. Or could I actually (easily) build the required consent type into the _paq.push function?

Best wishes

4

The code that you shared should send a custom event to Piwik PRO when the visitor performs an action and in this case “My draggable thing” will not be a variable in the interactive JS on your site.

It would be actually difficult to track the drag event as there is no default event type in Piwik PRO that would capture the drag event and this would require you to develop a custom solution for that.

What you can actually do to be more in line with your consent settings is to set up the drag addEventListener and add an if statement with consent form API methods from this documentation: JavaScript API — Piwik PRO Analytics Suite 18.9 documentation, to check if the visitor consented to Analytics and if they did, then send the “trackEvent” method.

If you would like to use the UI for that and manage the consent types in a more concise way, then you could also push a dataLayer event when the user performs the drag action:

<script>
  myDraggableThing.addEventListener('drag', function() {
    window.dataLayer.push({
        'blogCategory': 'Home budget',
        'blogAuthor': 'John Doe',
    });
});
</script>

And then use the dataLayer event as a trigger for your custom event tag that will capture the drag events.

1 Like
5

The dataLayer approach looks promising. I will have to experiment a little with this. Hopefully later this week.