addEventListener function calling multiple times

sujay_das
Visitor
sujay_das
I wrote a code to perform event handling using html id selector to track link click via a tealium extension. The problem I'm facing is the function is getting called multiple times and thus the collect tags for GA is getting triggered many times.Below is the code which I wrote. Can anyone figure out what is wrong with the code?
 
document.getElementById('EditcontactPage').addEventListener('click',clickListenerFunction);    

function clickListenerFunction()

{
  var data={
    "event_parent" : "Page Tag",
    "event_type" : "Click",
    "event_id": "EditcontactPage",
    "event_value" : "http://localhost:4200/editcontact",            
  };    

        console.log("data", data); 
        utag.link(data);
};`
6 REPLIES 6

addEventListener function calling multiple times

Tealium Employee

Hi @sujay_das - the only issue I notice with the code itself is an extra comma:


Reply to Message - Tealium Learning Community 2018-05-25 14-24-49.png

Are you adding that code via a 'DOM Ready' scoped TiQ extension?  If not, give that a try - other scopes could easily result in that code firing multiple times (adding multiple listeners) in different scenarios, which could lead to the symptoms you've described.

If that doesn't work, I'd suggest giving the Community some more information about where we can see the issue / your specific implementation.

Hope that helps!

 

 

 

addEventListener function calling multiple times

sujay_das
Visitor
sujay_das
Hi @calebjaquith,

I tried your solution and it worked. Previously I was using an "All Tags" scope due to which the tag must have fired multiple times.The tag is now getting fired once only.
Thanks

addEventListener function calling multiple times

BenStephenson
Contributor
BenStephenson Contributor

What is the scope of the extension with the code, @sujay_das?  If this code runs a second time (ie within the utag.link call) then it will add a second handler to the element.

If you add a breakpoint to the first line in the Chrome Debugger you should see if it is running twice.  If that's the problem, you can either change the scope to one of the "Run Once..." options, or you could wrap the whole thing in a condition to stop it firing a second time.

addEventListener function calling multiple times

sujay_das
Visitor
sujay_das
Hi Ben,

The scope was initially set to All Tags - After Load Rules. With that set, it was looping multiple times and as a result collect tags were firing too that many times.But after @calebjaquith suggested to use DOM ready scope, it's getting called once only now.
I also tried your solution to change the scope to "Run Once.." option and it's firing single time only now.
By the way, can you tell me which is an efficient solution to this issue?
Highlighted

addEventListener function calling multiple times

Tealium Employee

Hi @sujay_das,

I usually use DOM Ready, because it's important that the HTML element you're adding the listener to is already present (and DOM Ready ensures that, assuming a standard HTML page).

The other 'Run Once' options that @BenStephenson mentioned will probably work just as well, since it's very unlikely that setting would result in trying to add the listener before the element is present.  I'd expect either approach to work fine in most cases.

addEventListener function calling multiple times

Tealium Employee

I second @calebjaquith !