addEventListener function calling multiple times

[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);
};`

[calebjaquith · Accepted solution]

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

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!

[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

[BenStephenson · Accepted solution]

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.

[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?

[calebjaquith]

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.

[dan_george]

I second @calebjaquith !

[asdhjjjjjjjjj]

I am also facing a similar kind of issue when I place this code in the Tealium with scope DOM ready function is called multiple times.

window.tealium_sourcepoint = function(e) {
if (e.origin.toLowerCase() === 'https://notice.sp-prod.net') {
e.stopPropagation();
e.bubbles = false;
console.log(e.data)}}
window.addEventListener('message', tealium_sourcepoint, false);