{"id":104804,"date":"2025-02-23T07:42:53","date_gmt":"2025-02-23T07:42:53","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-get-position-index-of-visible-element\/"},"modified":"2025-02-23T07:42:53","modified_gmt":"2025-02-23T07:42:53","slug":"gtmtips-get-position-index-of-visible-element","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=104804","title":{"rendered":"#GTMTips: Get Position Index Of Visible Element"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p>It\u2019s time for a very simple <a href=\"https:\/\/www.simoahava.com\/tags\/gtmtips\/\">#GTMTips<\/a> article (I know, I always write that these are simple tips, but then they escalate into complex behemoths). Today, we\u2019ll cover a nifty trick you can use with the <a href=\"https:\/\/www.simoahava.com\/analytics\/element-visibility-trigger-google-tag-manager\/\">Element Visibility trigger<\/a> in <a href=\"https:\/\/tagmanager.google.com\/\">Google Tag Manager<\/a>. This tip was inspired by a question from Eugen Potlog in the <a href=\"https:\/\/www.facebook.com\/groups\/329145737601165\/\">Google Tag Manager Facebook group<\/a>.<\/p>\n<p>The use case is that you have an Element Visibility trigger firing for a number of elements all sharing the same CSS selector. In the image below, I want the visibility trigger to fire when any <code><\/p>\n<h2\/><\/code> header element becomes visibile on the screen. However, I also want to know which one of all those headers caused the trigger to fire. In other words, I want the <strong>position<\/strong> of the header; If it\u2019s the 5th header from the top, I want to get the number <code>5<\/code> to use in my tags. If it\u2019s the first header, I want it to return <code>1<\/code>.<\/p>\n<p>This is quite easy to do with a Custom JavaScript variable, and below I\u2019ll show you how.<\/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-84-get-the-position-index-of-the-visible-element\">Tip 84: Get the position index of the visible element<\/h2>\n<div style=\"aspect-ratio: 960 \/ 540;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2018\/08\/get-position-index-of-visible-element.jpg\" title=\"Get position index of visible element\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"540\" width=\"960\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2018\/08\/get-position-index-of-visible-element.jpg#ZgotmplZ\" alt=\"Get position index of visible element\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Here\u2019s what the Custom JavaScript variable 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\">var<\/span> list = <span style=\"color:#0aa\">document<\/span>.querySelectorAll(<span style=\"color:#a50\">'h2'<\/span>), <span style=\"color:#aaa;font-style:italic\">\/\/ Make sure this CSS selector matches the one in the trigger\n<\/span><span style=\"color:#aaa;font-style:italic\"\/>      el   = {{Click Element}};\n  <span style=\"color:#00a\">return<\/span> [].indexOf.call(list, el) + <span style=\"color:#099\">1<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n<p>This makes use of something you might not have thought of before, namely the fact that the built-in variable <strong>{{Click Element}}<\/strong> returns the element that caused the Element Visibility trigger to fire. It\u2019s a multi-purpose variable in that sense.<\/p>\n<p>The script first creates a list of all the possible elements the Element Visibility trigger can fire for, so it\u2019s important that <strong>the selector argument of <code>document.querySelectorAll(selector)<\/code> matches the one you use in the Element Visibility trigger<\/strong>. Once the list is created, <code>indexOf()<\/code> is used against a native array object (because the list returned by <code>querySelectorAll<\/code> doesn\u2019t have the <code>.indexOf()<\/code> method), and it checks if the list contains the element that fired the trigger.<\/p>\n<p>If the list does contain it, the element\u2019s position is returned as a positive integer, so the first element on the page would be <code>1<\/code>, the second would be <code>2<\/code> and so on. If the element does not match against the list of elements in the variable <code>list<\/code>, position <code>0<\/code> is returned. This means you have misconfigured the selector(s).<\/p>\n<p>This was a simple tip, undoubtedly, but I hope it\u2019s useful to some of you!<\/p>\n<\/p><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s time for a very simple #GTMTips article (I know, I always write that these are simple tips, but then they escalate into complex behemoths). Today, we\u2019ll cover a nifty trick you can use with the Element Visibility trigger in Google Tag Manager. This tip was inspired by a question from Eugen Potlog in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":104805,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12033],"tags":[27300,14492,11279,4904,34089],"dealstore":[],"offerexpiration":[],"class_list":["post-104804","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","tag-element","tag-gtmtips","tag-index","tag-position","tag-visible"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>#GTMTips: Get Position Index Of Visible Element - 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=104804\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"#GTMTips: Get Position Index Of Visible Element - Som2ny Network\" \/>\n<meta property=\"og:description\" content=\"It\u2019s time for a very simple #GTMTips article (I know, I always write that these are simple tips, but then they escalate into complex behemoths). Today, we\u2019ll cover a nifty trick you can use with the Element Visibility trigger in Google Tag Manager. This tip was inspired by a question from Eugen Potlog in the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fivemor.com\/?p=104804\" \/>\n<meta property=\"og:site_name\" content=\"Som2ny Network\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-23T07:42:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fivemor.com\/?p=104804#article\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/?p=104804\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\"},\"headline\":\"#GTMTips: Get Position Index Of Visible Element\",\"datePublished\":\"2025-02-23T07:42:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=104804\"},\"wordCount\":417,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=104804#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.jpg\",\"keywords\":[\"Element\",\"GTMTips\",\"Index\",\"position\",\"Visible\"],\"articleSection\":[\"Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fivemor.com\/?p=104804#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fivemor.com\/?p=104804\",\"url\":\"https:\/\/fivemor.com\/?p=104804\",\"name\":\"#GTMTips: Get Position Index Of Visible Element - Som2ny Network\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=104804#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=104804#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.jpg\",\"datePublished\":\"2025-02-23T07:42:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fivemor.com\/?p=104804#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fivemor.com\/?p=104804\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/?p=104804#primaryimage\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.jpg\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.jpg\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fivemor.com\/?p=104804#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fivemor.com\/?bp_activities=1\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#GTMTips: Get Position Index Of Visible Element\"}]},{\"@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: Get Position Index Of Visible Element - 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=104804","og_locale":"en_US","og_type":"article","og_title":"#GTMTips: Get Position Index Of Visible Element - Som2ny Network","og_description":"It\u2019s time for a very simple #GTMTips article (I know, I always write that these are simple tips, but then they escalate into complex behemoths). Today, we\u2019ll cover a nifty trick you can use with the Element Visibility trigger in Google Tag Manager. This tip was inspired by a question from Eugen Potlog in the [&hellip;]","og_url":"https:\/\/fivemor.com\/?p=104804","og_site_name":"Som2ny Network","article_published_time":"2025-02-23T07:42:53+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fivemor.com\/?p=104804#article","isPartOf":{"@id":"https:\/\/fivemor.com\/?p=104804"},"author":{"name":"admin","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371"},"headline":"#GTMTips: Get Position Index Of Visible Element","datePublished":"2025-02-23T07:42:53+00:00","mainEntityOfPage":{"@id":"https:\/\/fivemor.com\/?p=104804"},"wordCount":417,"commentCount":0,"publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"image":{"@id":"https:\/\/fivemor.com\/?p=104804#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.jpg","keywords":["Element","GTMTips","Index","position","Visible"],"articleSection":["Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fivemor.com\/?p=104804#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fivemor.com\/?p=104804","url":"https:\/\/fivemor.com\/?p=104804","name":"#GTMTips: Get Position Index Of Visible Element - Som2ny Network","isPartOf":{"@id":"https:\/\/fivemor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fivemor.com\/?p=104804#primaryimage"},"image":{"@id":"https:\/\/fivemor.com\/?p=104804#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.jpg","datePublished":"2025-02-23T07:42:53+00:00","breadcrumb":{"@id":"https:\/\/fivemor.com\/?p=104804#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fivemor.com\/?p=104804"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/?p=104804#primaryimage","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.jpg","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/get-position-index-of-visible-element.jpg","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/fivemor.com\/?p=104804#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fivemor.com\/?bp_activities=1"},{"@type":"ListItem","position":2,"name":"#GTMTips: Get Position Index Of Visible Element"}]},{"@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\/104804","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=104804"}],"version-history":[{"count":0,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/104804\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/media\/104805"}],"wp:attachment":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=104804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=104804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=104804"},{"taxonomy":"dealstore","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fdealstore&post=104804"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fofferexpiration&post=104804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}