{"id":101116,"date":"2025-02-21T08:20:45","date_gmt":"2025-02-21T08:20:45","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-trigger-javascript-function-without-using-a-custom-html-tag\/"},"modified":"2025-02-21T08:20:45","modified_gmt":"2025-02-21T08:20:45","slug":"gtmtips-trigger-javascript-function-without-using-a-custom-html-tag","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=101116","title":{"rendered":"#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag"},"content":{"rendered":"


\n<\/p>\n

\n
\n

Last updated 9 October 2020<\/strong>: customTask<\/code> updated to a more stable version.<\/p>\n<\/blockquote>\n

The Custom HTML tag<\/strong> in Google Tag Manager<\/a> is splendid. It\u2019s your go-to tool when you need to run arbitrary JavaScript on the webpage. Some might even use it to actually add HTML elements to the page, but I\u2019m willing to bet running JavaScript is its most common use.<\/p>\n

However, there\u2019s a downside to Custom HTML tags, which is only made more apparent on single-page apps which do not clear the full page when transitioning from one state to another. Custom HTML tags are injected to the end of <\/strong>, which means you might end up with a lot<\/strong> of clutter in your Document Object Model.<\/p>\n

In this article, I\u2019ll show you a pretty neat trick. We\u2019ll use customTask<\/code><\/a> to run a \u201cdummy\u201d Universal Analytics tag, whose only purpose is to execute your JavaScript code when the tag is triggered. This way, nothing is injected into the DOM, and the only overhead you\u2019ll run is the initial effort of creating the Google Analytics tracker.<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

Tip 94: Trigger custom JavaScript without using a Custom HTML tag<\/h2>\n
\n

<\/p>\n

\"Trigger<\/p>\n

<\/a><\/p>\n<\/div>\n

The way it works is fairly simple if you understand how customTask<\/code><\/a> works. This is what a sample function might look like:<\/p>\n

\n
function<\/span>() {\n  return<\/span> function<\/span>(model) {\n    \/\/ Prevent hit from being sent\n<\/span>\tmodel.set('sendHitTask'<\/span>, null<\/span>);\n\n    \/\/ The code you want to execute\n<\/span>    var<\/span> xhr = new<\/span> XMLHttpRequest();\n    xhr.open('POST'<\/span>, '\/endpoint'<\/span>, true<\/span>);\n    xhr.setRequestHeader('Content-Type'<\/span>, 'application\/json'<\/span>);\n    xhr.send(JSON.stringify({'key'<\/span>: 'abc12345'<\/span>}));\n  }\n}\n<\/code><\/pre>\n<\/div>\n
After \/\/ The code you want to execute<\/code> is where you\u2019ll add the JavaScript you want to run. In this example, I\u2019m firing a simple HTTP POST request to an endpoint on my server.<\/p>\n
The tag itself can be any Universal Analytics tag. All it needs is the Tracking ID (can be anything you want since the hit will never be dispatched) and the customTask<\/code> in its field, like so:<\/p>\n
\n
    <\/p>\n
    \"Dummy<\/p>\n
    <\/a><\/p>\n<\/div>\n
As you can see, the tag is extremely simple. Its only purpose is to execute the JavaScript in the customTask<\/code> variable.<\/p>\n
The other critical thing is the trigger<\/strong>. Use the trigger to establish when the JavaScript should be executed. In the example above, when the nonIdle<\/code> event is pushed into dataLayer<\/code>, the tag will run the code within {{JS – function – Increase counter}}<\/strong>.<\/p>\n
To summarize<\/strong>, this method seeks to address the following malady:<\/p>\n
\n
    <\/p>\n
    \"DOM<\/p>\n
    <\/a><\/p>\n<\/div>\n
Aside from looking hideous, every single element dynamically inserted into the DOM forces a reflow<\/strong> of the page, which becomes cumulatively more and more expensive the more elements are being added.<\/p>\n
By avoiding DOM injection, the JavaScript function is run within the bowels of Google Tag Manager\u2019s container (where it\u2019s compiled into a function) and analytics.js (which builds the hit).<\/p>\n
This way, you\u2019ve essentially created a JavaScript Function Tag<\/strong>, whose only purpose is to trigger the execution of JavaScript code.<\/p>\n
customTask<\/code> strikes again! Do you think you\u2019ll have uses for a hack like this? Let me know in the comments.<\/p>\n<\/p><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Last updated 9 October 2020: customTask updated to a more stable version. The Custom HTML tag in Google Tag Manager is splendid. It\u2019s your go-to tool when you need to run arbitrary JavaScript on the webpage. Some might even use it to actually add HTML elements to the page, but I\u2019m willing to bet running […]<\/p>\n","protected":false},"author":1,"featured_media":101117,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12033],"tags":[834,5264,14492,13834,29091,1791,22089],"dealstore":[],"offerexpiration":[],"class_list":["post-101116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","tag-custom","tag-function","tag-gtmtips","tag-html","tag-javascript","tag-tag","tag-trigger"],"yoast_head":"\n#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag - 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=101116\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag - Som2ny Network\" \/>\n<meta property=\"og:description\" content=\"Last updated 9 October 2020: customTask updated to a more stable version. The Custom HTML tag in Google Tag Manager is splendid. It\u2019s your go-to tool when you need to run arbitrary JavaScript on the webpage. Some might even use it to actually add HTML elements to the page, but I\u2019m willing to bet running […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fivemor.com\/?p=101116\" \/>\n<meta property=\"og:site_name\" content=\"Som2ny Network\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-21T08:20:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fivemor.com\/?p=101116#article\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/?p=101116\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\"},\"headline\":\"#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag\",\"datePublished\":\"2025-02-21T08:20:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=101116\"},\"wordCount\":509,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=101116#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.jpg\",\"keywords\":[\"Custom\",\"FUNCTION\",\"GTMTips\",\"HTML\",\"JavaScript\",\"TAG\",\"Trigger\"],\"articleSection\":[\"Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fivemor.com\/?p=101116#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fivemor.com\/?p=101116\",\"url\":\"https:\/\/fivemor.com\/?p=101116\",\"name\":\"#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag - Som2ny Network\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=101116#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=101116#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.jpg\",\"datePublished\":\"2025-02-21T08:20:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fivemor.com\/?p=101116#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fivemor.com\/?p=101116\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/?p=101116#primaryimage\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.jpg\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.jpg\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fivemor.com\/?p=101116#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fivemor.com\/?bp_activities=1\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag\"}]},{\"@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: Trigger Javascript Function Without Using A Custom HTML Tag - 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=101116","og_locale":"en_US","og_type":"article","og_title":"#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag - Som2ny Network","og_description":"Last updated 9 October 2020: customTask updated to a more stable version. The Custom HTML tag in Google Tag Manager is splendid. It\u2019s your go-to tool when you need to run arbitrary JavaScript on the webpage. Some might even use it to actually add HTML elements to the page, but I\u2019m willing to bet running […]","og_url":"https:\/\/fivemor.com\/?p=101116","og_site_name":"Som2ny Network","article_published_time":"2025-02-21T08:20:45+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fivemor.com\/?p=101116#article","isPartOf":{"@id":"https:\/\/fivemor.com\/?p=101116"},"author":{"name":"admin","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371"},"headline":"#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag","datePublished":"2025-02-21T08:20:45+00:00","mainEntityOfPage":{"@id":"https:\/\/fivemor.com\/?p=101116"},"wordCount":509,"commentCount":0,"publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"image":{"@id":"https:\/\/fivemor.com\/?p=101116#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.jpg","keywords":["Custom","FUNCTION","GTMTips","HTML","JavaScript","TAG","Trigger"],"articleSection":["Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fivemor.com\/?p=101116#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fivemor.com\/?p=101116","url":"https:\/\/fivemor.com\/?p=101116","name":"#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag - Som2ny Network","isPartOf":{"@id":"https:\/\/fivemor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fivemor.com\/?p=101116#primaryimage"},"image":{"@id":"https:\/\/fivemor.com\/?p=101116#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.jpg","datePublished":"2025-02-21T08:20:45+00:00","breadcrumb":{"@id":"https:\/\/fivemor.com\/?p=101116#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fivemor.com\/?p=101116"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/?p=101116#primaryimage","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.jpg","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/trigger-javascript-using-customtask.jpg","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/fivemor.com\/?p=101116#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fivemor.com\/?bp_activities=1"},{"@type":"ListItem","position":2,"name":"#GTMTips: Trigger Javascript Function Without Using A Custom HTML Tag"}]},{"@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\/101116","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=101116"}],"version-history":[{"count":0,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/101116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/media\/101117"}],"wp:attachment":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=101116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=101116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=101116"},{"taxonomy":"dealstore","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fdealstore&post=101116"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fofferexpiration&post=101116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The first few lines of the closure simply prevent the tag from doing anything. They null<\/code> every single value stored in the model object, including all the tasks<\/a>. This way once the customTask<\/code> finishes, the hit builder will no longer do anything else (such as build and send the hit). That\u2019s why I call it a \u201cdummy\u201d tag.<\/p>\n