GTM: collect coordinates (x,y) from an event

Question

I have edit permissions on google tag manager. Is it possible from this tool to collect in the datalayer the coordinates (x, y) of an event when it is triggered?

It's possible that the web element from which the event jumps changes position in time.

How to do it?

Kemen Paulos Plaza · Answer 1 · 2017-05-29T09:03:28.773

This function can help you to find the position of the clicked element listening the event and detecting the position via the jQuery function of position(), all of this adding a listener, this code needs to be implemented on the page or inside a custom HTML tag

    $("a").click(function(event) {
        var loc = $(this).position();
        dataLayer = window.dataLayer || [];
        dataLayer.push({ 'event' : 'click_element' , 'posy' : loc.top , 'posx': loc.left });
    });

Also must be a clean way to do this inside a var, but it's a little more complicated to create that function.

Greetings

------------- Old Answer -----------------

What type of event are you talking about? this is a click? or is a event lauched by a Javascript? For example for a function on your head what you determine as X and Y?

Maybe determine what type of events can guide better the answer, this case, for example, you can see an example of clickEvent Position.

This function can be helpful, this track your mouse location and pushes the information to the dataLayer.

var posX;
var posY;
document.onmousemove = function(e){
      posX= e.pageX;
      posY= e.pageY;
};
function mouseLocation(){
     if(typeof window.dataLayer === 'undefined'){ window.dataLayer =  window.dataLayer || [] };
     dataLayer.push({ 'event' : 'mouseLocation', 'PosX' : posX, 'PosY' : posY});
};
  // paste this on the head or inside an HTML tag. 

   mouseLocation(); //Use this function on the onClick on the object to be track

You can try to add this as a variable adding a return on the function if you want to be used with a click listener. Remember that the location depends on the aspect ratio and resolution, so the button can be on the same place, but the X and Y location might not be the same.

Hi Paulo! Thanks for your answer. The purpose of this study is to plot a click heat map over a screen shot of a URL. Therefore I need to know in what position the web element is from what the event is triggered. — Mario M., May 22 '17 at 10:25
So @Kemen Paulos Plaza the clickEvent Position would be a good candidate. I found it: http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element — Mario M., May 22 '17 at 10:32
Hi Mario, thanks for the update, yes the Event position of the element clicked is a very good option, I update mi answer to fit you needs, this extract the position of the element clicked, take in consideration that the selector CSS name the elements to be detected in this case only links, you can use the wildcart * for select all or any other CSS selector. Also this event is very sensitive for the HTML structure,for example, if a link is inside a div, the user can click the div or in the getting differents position clicking the same visual element. it's a common issue on the listeners — Kemen Paulos Plaza, May 29 '17 at 08:51

score 0 · Answer 2 · answered May 19 '17 at 15:04

In the case of click event you can get the coordinates of the event activation.

How to do?

Write a simple JS function to get the x,y co-ordinates on a mouse click.
Push the values into the datalayer with some event key.
Fire the tag through GTM on that data Layer event

GTM: collect coordinates (x,y) from an event

2 Answers2