{"id":111854,"date":"2025-02-26T19:58:32","date_gmt":"2025-02-26T19:58:32","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-simple-custom-event-listeners-with-google-tag-manager\/"},"modified":"2025-02-26T19:58:32","modified_gmt":"2025-02-26T19:58:32","slug":"gtmtips-simple-custom-event-listeners-with-google-tag-manager","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=111854","title":{"rendered":"#GTMTips: Simple Custom Event Listeners With Google Tag Manager"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p>First of all, check out <a href=\"https:\/\/www.simoahava.com\/analytics\/custom-event-listeners-gtm\/\">this article<\/a> for an overview of how custom event listeners work in <a href=\"https:\/\/tagmanager.google.com\/\">Google Tag Manager<\/a>. The reason I\u2019m writing this <a href=\"https:\/\/www.simoahava.com\/tags\/gtmtips\/\">#GTMTips<\/a> article is that I want to upgrade the solution slightly, and I want to bring it back into the spotlight. Why? Because it\u2019s still one of the most effective ways to customize your Google Tag Manager implementation.<\/p>\n<p>A <strong>custom event listener<\/strong> is a handler you write with JavaScript. It lets you handle any <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\">JavaScript DOM events<\/a>, such as click, form submit, mouse hover, drag, touch, error, page load and unload, and so many more. It also lets you leverage the <code>useCapture<\/code> parameter which will prove very helpful if you have <a href=\"https:\/\/www.simoahava.com\/gtm-tips\/fix-problems-with-gtm-listeners\/\">other JavaScript on the site interfering<\/a> with GTM\u2019s default event <a href=\"https:\/\/www.simoahava.com\/analytics\/trigger-guide-google-tag-manager\/\">triggers<\/a>.<\/p>\n<p>                <span class=\"simmer\"><br \/>\n  <span class=\"close\">X<\/span><\/p>\n<p>\n    <span class=\"fa fa-md fa-bell\"\/><br \/>\n    <strong>The Simmer Newsletter<\/strong>\n  <\/p>\n<p>\n    Subscribe to the <a href=\"https:\/\/www.simoahava.com\/newsletter\/\">Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n  <\/p>\n<p>  <\/span><\/p>\n<h2 id=\"tip-69-create-custom-event-listeners-with-ease\">Tip 69: Create custom event listeners with ease<\/h2>\n<div style=\"aspect-ratio: 960 \/ 540;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2018\/01\/simple-custom-event-listener-gtm.jpg\" title=\"Create simple custom event listeners with Google Tag Manager\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"540\" width=\"960\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2018\/01\/simple-custom-event-listener-gtm.jpg#ZgotmplZ\" alt=\"Create simple custom event listeners with Google Tag Manager\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>The solution comprises the following items: a <strong>Custom HTML tag<\/strong> firing with the page load, and a <strong>Custom JavaScript variable<\/strong> providing the callback. You\u2019ll also need a bunch of <strong>Data Layer variables<\/strong> to fetch the values pushed into <code>dataLayer<\/code> by the callback.<\/p>\n<p>The idea is that when the page loads, you attach your custom listener to whatever element you want to track for the given event. Then, when this interaction is recorded by the browser, the code pushes an object into <code>dataLayer<\/code> which you can then use to populate your tags.<\/p>\n<h3 id=\"the-custom-html-tag\">The Custom HTML tag<\/h3>\n<p>This is what the Custom HTML tag would look like.<\/p>\n<div class=\"highlight\">\n<pre style=\"background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4\"><code class=\"language-html\" data-lang=\"html\">script&gt;\n  (<span style=\"color:#00a\">function<\/span>() {\n    <span style=\"color:#aaa;font-style:italic\">\/\/ Use events from https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\n<\/span><span style=\"color:#aaa;font-style:italic\"\/>    <span style=\"color:#00a\">var<\/span> eventName = <span style=\"color:#a50\">'dragstart'<\/span>;\n    \n    <span style=\"color:#aaa;font-style:italic\">\/\/ Attach listener directly to element or document if element not found\n<\/span><span style=\"color:#aaa;font-style:italic\"\/>    <span style=\"color:#00a\">var<\/span> el = <span style=\"color:#0aa\">document<\/span>.querySelector(<span style=\"color:#a50\">'img#download'<\/span>) || <span style=\"color:#0aa\">document<\/span>;\n    \n    <span style=\"color:#aaa;font-style:italic\">\/\/ Leave useCapture to true if you want to avoid propagation issues.\n<\/span><span style=\"color:#aaa;font-style:italic\"\/>    <span style=\"color:#00a\">var<\/span> useCapture = <span style=\"color:#00a\">true<\/span>;\n    \n    el.addEventListener(eventName, {{JS - Generic Event callback}}, useCapture);\n  })();\n<span style=\"color:#1e90ff;font-weight:bold\">script<\/span>&gt;<\/code><\/pre>\n<\/div>\n<p>Fire this on a <strong>Page View<\/strong> trigger if attaching directly to the <code>document<\/code> node, or a <strong>DOM Ready<\/strong> trigger if attaching directly to an element and the element is in the <em>HTML source<\/em>, or a <strong>Window Loaded<\/strong> trigger if attaching directly to an element that is added dynamically to the page during the page load.<\/p>\n<p>Make sure you change the <code>eventName<\/code> value to reflect which event you want to track. If you want to track clicks, change it to <code>click<\/code>. If you want to track users hovering over the element, change it to <code>mouseover<\/code>, and so on.<\/p>\n<p>You can choose to add the listener directly to an element by using the appropriate <a href=\"https:\/\/www.simoahava.com\/gtm-tips\/10-useful-css-selectors\/\">CSS selector<\/a> as the parameter of <code>document.querySelector()<\/code>. Alternatively, you can add the listener directly on the <code>document<\/code> node.<\/p>\n<p>Finally, you can set <code>useCapture<\/code> to <code>false<\/code> if you want to use the bubble phase instead of the capture phase with your event handler. Because you are simply tracking interactions and not actually creating any side effects, I really recommend leaving this as <code>true<\/code>.<\/p>\n<p>This is significant especially if you have other JavaScript on the site messing with event propagation. A typical symptom of this is that your <strong>Form and Just Links<\/strong> triggers <strong>refuse to work<\/strong>. So by using the <code>capture<\/code> phase, you are evading propagation-stopping JavaScript, and might just be able to track these events when GTM\u2019s default triggers are unable to do so.<\/p>\n<p>The last line actually adds the listener, providing a Custom JavaScript variable as the callback.<\/p>\n<h3 id=\"the-custom-javascript-variable\">The Custom JavaScript variable<\/h3>\n<p>Here\u2019s what <strong>{{JS &#8211; Generic Event callback}}<\/strong> should look like:<\/p>\n<div class=\"highlight\">\n<pre style=\"background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4\"><code class=\"language-javascript\" data-lang=\"javascript\"><span style=\"color:#00a\">function<\/span>() {\n  <span style=\"color:#00a\">return<\/span> <span style=\"color:#00a\">function<\/span>(event) {\n    <span style=\"color:#0aa\">window<\/span>.dataLayer.push({\n      event: <span style=\"color:#a50\">'custom.event.'<\/span> + event.type,\n      <span style=\"color:#a50\">'custom.gtm.element'<\/span>: event.target,\n      <span style=\"color:#a50\">'custom.gtm.elementClasses'<\/span>: event.target.className || <span style=\"color:#a50\">''<\/span>,\n      <span style=\"color:#a50\">'custom.gtm.elementId'<\/span>: event.target.id || <span style=\"color:#a50\">''<\/span>,\n      <span style=\"color:#a50\">'custom.gtm.elementTarget'<\/span>: event.target.target || <span style=\"color:#a50\">''<\/span>,\n      <span style=\"color:#a50\">'custom.gtm.elementUrl'<\/span>: event.target.href || event.target.action || <span style=\"color:#a50\">''<\/span>,\n      <span style=\"color:#a50\">'custom.gtm.originalEvent'<\/span>: event\n    });\n  };\n}\n<\/code><\/pre>\n<\/div>\n<p>This callback pushes a bunch of information about the event into <code>dataLayer<\/code>, namespacing everything with the <code>custom.gtm.<\/code> prefix. The event name itself will be <code>custom.event.<event name=\"\"\/><\/code>, e.g. <code>custom.event.click<\/code> for a click event or <code>custom.event.dragstart<\/code> when tracking the dragging action.<\/p>\n<p>The variables pushed into <code>dataLayer<\/code> mirror those used by GTM\u2019s default triggers, with the exception of <code>custom.gtm.originalEvent<\/code> which will contain a reference to the original event that invoked the callback. This is significant if you need information from this event object, such as which mouse button was clicked when a click is registered. This is (currently) missing from GTM\u2019s default trigger functionality.<\/p>\n<h3 id=\"data-layer-variables\">Data Layer variables<\/h3>\n<p>You need to create a Data Layer variable for each of the keys pushed into <code>dataLayer<\/code>. To mimic Google Tag Manager\u2019s naming schema for Built-in variables, you could use something like these:<\/p>\n<table>\n<thead>\n<tr>\n<th>Variable name<\/th>\n<th>Data Layer Variable Name<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>{{Custom Event Element}}<\/td>\n<td>custom.gtm.element<\/td>\n<\/tr>\n<tr>\n<td>{{Custom Event Classes}}<\/td>\n<td>custom.gtm.elementClasses<\/td>\n<\/tr>\n<tr>\n<td>{{Custom Event ID}}<\/td>\n<td>custom.gtm.elementId<\/td>\n<\/tr>\n<tr>\n<td>{{Custom Event Target}}<\/td>\n<td>custom.gtm.elementTarget<\/td>\n<\/tr>\n<tr>\n<td>{{Custom Event URL}}<\/td>\n<td>custom.gtm.elementUrl<\/td>\n<\/tr>\n<tr>\n<td>{{Custom Event Original Event}}<\/td>\n<td>custom.gtm.originalEvent<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 id=\"the-custom-event-trigger\">The Custom Event trigger<\/h3>\n<p>To fire your tags when a custom event is registered, you\u2019ll need a Custom Event trigger set to the event name pushed into <code>dataLayer<\/code> in the Custom JavaScript variable callback. So, to follow the example of the <code>dragstart<\/code> event (registered when the user starts dragging the given element in the browser), the trigger would look like this:<\/p>\n<div style=\"aspect-ratio: 1834 \/ 672;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2018\/01\/custom-event-dragstart.jpg\" title=\"Custom Event trigger for dragstart\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"672\" width=\"1834\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2018\/01\/custom-event-dragstart.jpg#ZgotmplZ\" alt=\"Custom Event trigger for dragstart\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<h3 id=\"working-example\">Working example<\/h3>\n<p>Let\u2019s tackle a problem that you might well have on your site. You want to track a form element with id <code>contactUs<\/code>, but no matter what you do, GTM\u2019s own Form trigger refuses to fire. You\u2019ve looked around, read <a href=\"https:\/\/www.simoahava.com\/gtm-tips\/fix-problems-with-gtm-listeners\/\">my articles<\/a>, and come to the conclusion that the problem is other JavaScript on the site stopping the propagation of the form submit event. Your friendly local developer tells you that due to the nature of the plugin you use, it\u2019s impossible to change this behavior.<\/p>\n<p>Custom event listeners to the rescue! You can trust the <code>useCapture<\/code> flag to track the form submission even though propagation has been stopped. Here\u2019s what the <strong>Custom HTML tag<\/strong> would look like:<\/p>\n<div class=\"highlight\">\n<pre style=\"background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4\"><code class=\"language-html\" data-lang=\"html\">script&gt;\n  (<span style=\"color:#00a\">function<\/span>() {\n    <span style=\"color:#aaa;font-style:italic\">\/\/ Use events from https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\n<\/span><span style=\"color:#aaa;font-style:italic\"\/>    <span style=\"color:#00a\">var<\/span> eventName = <span style=\"color:#a50\">'submit'<\/span>;\n\t\n    <span style=\"color:#aaa;font-style:italic\">\/\/ Attach listener directly to element or document if element not found\n<\/span><span style=\"color:#aaa;font-style:italic\"\/>    <span style=\"color:#00a\">var<\/span> el = <span style=\"color:#0aa\">document<\/span>.querySelector(<span style=\"color:#a50\">'form#contactUs'<\/span>) || <span style=\"color:#0aa\">document<\/span>;\n\t\n    <span style=\"color:#aaa;font-style:italic\">\/\/ Leave useCapture to true if you want to avoid propagation issues.\n<\/span><span style=\"color:#aaa;font-style:italic\"\/>    <span style=\"color:#00a\">var<\/span> useCapture = <span style=\"color:#00a\">true<\/span>;\n\t\n    el.addEventListener(eventName, {{JS - Generic Event callback}}, useCapture);\n  })();\n<span style=\"color:#1e90ff;font-weight:bold\">script<\/span>&gt;<\/code><\/pre>\n<\/div>\n<p>Add a <strong>DOM Ready<\/strong> trigger to this tag, set to fire on pages which have this particular form in the HTML source.<\/p>\n<p>Now, whenever a form submission is detected, your Custom HTML tag will go off, pushing the following object into <code>dataLayer<\/code>:<\/p>\n<div class=\"highlight\">\n<pre style=\"background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4\"><code class=\"language-javascript\" data-lang=\"javascript\">{\n    <span style=\"color:#a50\">'event'<\/span>: <span style=\"color:#a50\">'custom.event.submit'<\/span>,\n    <span style=\"color:#a50\">'custom.gtm.element'<\/span>: form<span style=\"color:#f00;background-color:#faa\">#<\/span>contactUs,\n    <span style=\"color:#a50\">'custom.gtm.elementClasses'<\/span>: <span style=\"color:#a50\">''<\/span>,\n    <span style=\"color:#a50\">'custom.gtm.elementId'<\/span>: <span style=\"color:#a50\">'contactUs'<\/span>,\n    <span style=\"color:#a50\">'custom.gtm.elementTarget'<\/span>: <span style=\"color:#a50\">''<\/span>,\n    <span style=\"color:#a50\">'custom.gtm.elementUrl'<\/span>: <span style=\"color:#a50\">'https:\/\/www.domain.com\/my-form-handler\/'<\/span>,\n    <span style=\"color:#a50\">'custom.gtm.originalEvent'<\/span>: submitEvent\n}\n<\/code><\/pre>\n<\/div>\n<p>And you can pick these up with the Data Layer variables you created earlier.<\/p>\n<p>You\u2019ll just need a <strong>Custom Event trigger<\/strong>, where the <strong>Event name<\/strong> field has the value <code>custom.event.submit<\/code>.<\/p>\n<p>Once you attach that trigger to your tag, you can use the Data Layer variables to populate all the relevant fields.<\/p>\n<h2 id=\"summary\">Summary<\/h2>\n<p>Whenever I talk about GTM to someone, and that\u2019s very often, I always end up talking about the many ways we can customize Google Tag Manager to work even more efficiently on our websites. Custom Event listeners are still, after all these years, my favorite way of customizing a GTM setup.<\/p>\n<p>They give you so much power in tracking user interactions on the site.<\/p>\n<p>As always, I hope GTM continues to release new default triggers for us. I\u2019ve long dreamed of a \u201cblank\u201d event trigger, where you simply have to add the DOM event name, and it would also have a checkbox for whether you want to use <code>capture<\/code> mode or not. It would make this custom solution redundant, but that\u2019s only a good thing in my book.<\/p>\n<p>Have you created any creative custom event listeners in your GTM setups?<\/p>\n<\/p><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>First of all, check out this article for an overview of how custom event listeners work in Google Tag Manager. The reason I\u2019m writing this #GTMTips article is that I want to upgrade the solution slightly, and I want to bring it back into the spotlight. Why? Because it\u2019s still one of the most effective [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":111856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12033],"tags":[834,9252,1531,14492,44120,14495,2961,1791],"dealstore":[],"offerexpiration":[],"class_list":["post-111854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","tag-custom","tag-event","tag-google","tag-gtmtips","tag-listeners","tag-manager","tag-simple","tag-tag"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>#GTMTips: Simple Custom Event Listeners With Google Tag Manager - Som2ny Network<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fivemor.com\/?p=111854\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"#GTMTips: Simple Custom Event Listeners With Google Tag Manager - Som2ny Network\" \/>\n<meta property=\"og:description\" content=\"First of all, check out this article for an overview of how custom event listeners work in Google Tag Manager. The reason I\u2019m writing this #GTMTips article is that I want to upgrade the solution slightly, and I want to bring it back into the spotlight. Why? Because it\u2019s still one of the most effective [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fivemor.com\/?p=111854\" \/>\n<meta property=\"og:site_name\" content=\"Som2ny Network\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-26T19:58:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fivemor.com\/?p=111854#article\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/?p=111854\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\"},\"headline\":\"#GTMTips: Simple Custom Event Listeners With Google Tag Manager\",\"datePublished\":\"2025-02-26T19:58:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=111854\"},\"wordCount\":1121,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=111854#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg\",\"keywords\":[\"Custom\",\"event\",\"Google\",\"GTMTips\",\"listeners\",\"Manager\",\"Simple\",\"TAG\"],\"articleSection\":[\"Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fivemor.com\/?p=111854#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fivemor.com\/?p=111854\",\"url\":\"https:\/\/fivemor.com\/?p=111854\",\"name\":\"#GTMTips: Simple Custom Event Listeners With Google Tag Manager - Som2ny Network\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=111854#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=111854#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg\",\"datePublished\":\"2025-02-26T19:58:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fivemor.com\/?p=111854#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fivemor.com\/?p=111854\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/?p=111854#primaryimage\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fivemor.com\/?p=111854#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fivemor.com\/?bp_activities=1\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#GTMTips: Simple Custom Event Listeners With Google Tag Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fivemor.com\/#website\",\"url\":\"https:\/\/fivemor.com\/\",\"name\":\"Som2ny Network\",\"description\":\"Daily Deals\",\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fivemor.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fivemor.com\/#organization\",\"name\":\"Som2ny Network\",\"url\":\"https:\/\/fivemor.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"width\":300,\"height\":86,\"caption\":\"Som2ny Network\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/fivemor.com\"],\"url\":\"https:\/\/fivemor.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"#GTMTips: Simple Custom Event Listeners With Google Tag Manager - Som2ny Network","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fivemor.com\/?p=111854","og_locale":"en_US","og_type":"article","og_title":"#GTMTips: Simple Custom Event Listeners With Google Tag Manager - Som2ny Network","og_description":"First of all, check out this article for an overview of how custom event listeners work in Google Tag Manager. The reason I\u2019m writing this #GTMTips article is that I want to upgrade the solution slightly, and I want to bring it back into the spotlight. Why? Because it\u2019s still one of the most effective [&hellip;]","og_url":"https:\/\/fivemor.com\/?p=111854","og_site_name":"Som2ny Network","article_published_time":"2025-02-26T19:58:32+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fivemor.com\/?p=111854#article","isPartOf":{"@id":"https:\/\/fivemor.com\/?p=111854"},"author":{"name":"admin","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371"},"headline":"#GTMTips: Simple Custom Event Listeners With Google Tag Manager","datePublished":"2025-02-26T19:58:32+00:00","mainEntityOfPage":{"@id":"https:\/\/fivemor.com\/?p=111854"},"wordCount":1121,"commentCount":0,"publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"image":{"@id":"https:\/\/fivemor.com\/?p=111854#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg","keywords":["Custom","event","Google","GTMTips","listeners","Manager","Simple","TAG"],"articleSection":["Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fivemor.com\/?p=111854#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fivemor.com\/?p=111854","url":"https:\/\/fivemor.com\/?p=111854","name":"#GTMTips: Simple Custom Event Listeners With Google Tag Manager - Som2ny Network","isPartOf":{"@id":"https:\/\/fivemor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fivemor.com\/?p=111854#primaryimage"},"image":{"@id":"https:\/\/fivemor.com\/?p=111854#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg","datePublished":"2025-02-26T19:58:32+00:00","breadcrumb":{"@id":"https:\/\/fivemor.com\/?p=111854#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fivemor.com\/?p=111854"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/?p=111854#primaryimage","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/simple-custom-event-listener-gtm.jpg","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/fivemor.com\/?p=111854#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fivemor.com\/?bp_activities=1"},{"@type":"ListItem","position":2,"name":"#GTMTips: Simple Custom Event Listeners With Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/fivemor.com\/#website","url":"https:\/\/fivemor.com\/","name":"Som2ny Network","description":"Daily Deals","publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fivemor.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fivemor.com\/#organization","name":"Som2ny Network","url":"https:\/\/fivemor.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","width":300,"height":86,"caption":"Som2ny Network"},"image":{"@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","caption":"admin"},"sameAs":["https:\/\/fivemor.com"],"url":"https:\/\/fivemor.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/111854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=111854"}],"version-history":[{"count":0,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/111854\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/media\/111856"}],"wp:attachment":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=111854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=111854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=111854"},{"taxonomy":"dealstore","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fdealstore&post=111854"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fofferexpiration&post=111854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}