GTM fire event before page act, how?

Question

I have a simple page, which in URL https://www.myshop.com/user/quickact , and the html looks like :

<input id="pid" />Keyin Product ID
<input id="count" />Keyin product count
<a id="addList" href="javascript:void(0);" class="buttonAction">Add to List</a>
<!--some external js file handle click event for this link-->

When user clicked hyper text [Add to List], my page will :

1. Get pid/count value, put into a javascript array.
2. Reset pid with '', reset count with 1'.

---

Things I'm now doing in GTM are :

1. When PageURL contains "user/quickact"
2. And user clicked link with ID "addList"
3. Get pid/count value, and send them into GA via GTM tag.

Here's how I read them in GTM's custom variable

function()
{
  var pid=document.getElementById('pid').value;
  var count=document.getElementById('count').value;
  return pid+','+count;
}

---

My problem is, GA event did fired, but the value...my custom variable always return ',1'.

It means my GTM tag fired after page's action , so it can only read reset value, not the actual value user key-in.

Can any one gives suggestion to solve this ?

Answer 1

I'm not sure if there's a solution to control the order of execution of multiple events, but one workaround would be to provide the required data for GTM with the same functionality, that you are using to get the values and to reset them. This assumes, that you have control over this code.

You could do something like this:

function yourFunctionForButtonClick() {

  //Your code to get pid/count value, put into a javascript array.

  //new code to provide data to GTM
  dataLayer.push({
    event: 'newPidProvided',
    pidcountvalue: pid + ',' + count
  }); 

  //Your code to reset pid with '', reset count with 1'.

}

In this case, you need to set up your GTM trigger to listen to newPidProvided event instead of clicks, while still checking for "user/quickact" to be present in the URL. (Which could also be done in the function, if no other tag or trigger uses pid+count in GTM on other pages.) You'll also have to use a dataLayer variable instead of custom JavaScript type.