JQuery-Funktion im Hintergrund klicken - GTM

Question

Ich habe ein benutzerdefiniertes Tag in GTM (Google Tag Manager) gebaut. Ich möchte, dass das Tag nachverfolgt, wenn der Benutzer ein bestimmtes Bootstrap-Modal schließt. Um das zu tun, ich baute eine benutzerdefinierte Funktion:

$(function() { 
     $('#popup').click(function() { 
     var label = $("#popup .container h4").text(); 
     dataLayer.push({ 
     'event': 'GAEvent', 
     'eventCat': 'Event Engagement', 
     'eventAction': label + " Modal - Close", 
     'eventLabel': label, 
     'gaNonInt': false 
     }); 
    }); 
}); 

Die HTML-Struktur für die Modal wird wie folgt:

<div id="popup"> <!--The modal background/overlay is set here--> 
    <div id="popup-block">Content nested here</div> 
</div> 

Wenn ein Benutzer klickt auf der Hintergrundebene (# Pop-up des Hintergrund), das Modal schließt sich. Wenn ich jedoch #popup mit meiner benutzerdefinierten Funktion targetiere, wird das Tag ausgelöst, wenn auf ein Element geklickt wird, das innerhalb des #popup-Bereichs verschachtelt ist. Gibt es eine Möglichkeit, nur den Hintergrund des #popup div-Elements anzusteuern? Danke im Voraus.

Answer 1

Versuchen Sie folgendes:

$(function() { 
     $('#popup').click(function(e) { 
     if(e.target != this) return; // probably a child was clicked. 
     var label = $("#popup .container h4").text(); 
     dataLayer.push({ 
     'event': 'GAEvent', 
     'eventCat': 'Event Engagement', 
     'eventAction': label + " Modal - Close", 
     'eventLabel': label, 
     'gaNonInt': false 
     }); 
    }); 
});