Articles on: Share & analyse

Fire GTM triggers on element visibility

When you publish a Maglr project, every scene and element on the page gets its own HTML ID. In Google Tag Manager (GTM), you can use these IDs in an Element Visibility trigger to fire a tag when a visitor sees that scene or element, for example:


  • a specific scene comes into view
  • a specific element comes into view
  • a pop-up opens (a pop-up is a scene, so it has a scene ID)
  • the visitor reaches a certain point on the page (an element you placed there)


This only works if GTM is installed on your project. See Integrate Google Tag Manager.


Maglr also sends some events to GTM on its own, such as scroll depth and pop-ups opening and closing. You don't need IDs for those: see Connect Maglr events with Google Tag Manager.


Finding scene and element IDs


Scene and element IDs are in the HTML of your published page. To find one:


  1. Open the published project (its live URL) in Chrome, Edge or Firefox.
  2. Right-click anywhere on the page and choose Inspect. The browser's developer tools open on the Elements panel.
  3. Press Ctrl+F (Cmd+F on Mac) in the Elements panel and search for the scene's name or the element's layer name, as you named it in the editor. The name appears in the data-label attribute of the scene or element's tag. If another scene or element on the page has the same name, give yours a unique name in the editor and publish again.
  4. On that same tag, copy the value of id. If the match is a link tag (a) with no id, use the next match instead: the element's own tag, just inside the link.


You can tell the IDs apart by how they start:


  • Scene IDs start with scene_ and sit on a section tag.
  • Element IDs start with uuid_ and sit on the element's own tag, such as img, div or h1.


Image: retrieving the scene & element ID's of a Maglr publication


Desktop and mobile IDs


If your published Maglr page has a mobile layout, every scene and element on it has two IDs: one for the desktop layout and one for the mobile layout. The page's HTML contains both layouts, but a visitor only ever sees one of them. The mobile layout shows on screens 500px wide or less, the desktop layout on wider screens. A page without a mobile layout shows the desktop layout on every screen, so only the desktop IDs are used.


  • Desktop IDs end in _1.
  • Mobile IDs end in _2.


A GTM trigger set to the desktop ID never fires for visitors who see the mobile layout, and the other way round. If your page has a mobile layout, your search for the scene or layer name finds it twice: once in each layout. Copy both IDs.


To track a scene or element on desktop and mobile, either:


  • create a separate trigger for each ID, or
  • create one trigger with Selection Method set to CSS Selector, and enter both IDs in Element Selector, separated by a comma, each with a # in front of it. For example: #scene_s123456_abc_1, #scene_s123456_abc_2.


With Selection Method set to ID, enter the ID without a #.


Creating an Element Visibility trigger in GTM


To fire a trigger when a Maglr scene or element becomes visible:


  1. In Google Tag Manager, go to Triggers and click New.
  2. Click Trigger Configuration and choose Element Visibility.
  3. Set Selection Method to ID.
  4. Paste the scene or element ID into Element ID.
  5. Under When to fire this trigger, choose how often the trigger fires, for example Once per page.
  6. Click Save. Then add the trigger to the tag that should fire, under that tag's Triggering.


This trigger only fires for the layout the ID belongs to: IDs ending in _1 are desktop, IDs ending in _2 are mobile. To cover both layouts in one trigger, set Selection Method to CSS Selector instead and enter both IDs in Element Selector, each with a # in front, separated by a comma.


Firing a Trigger based on element visibility in Google Tag Manager


By default, GTM fires an Element Visibility trigger when at least 50% of the scene or element is on screen (Minimum Percent Visible). A scene more than twice as tall as the screen can never be 50% visible, so the trigger never fires. For long scenes, lower Minimum Percent Visible, or use the ID of an element near the top of the scene instead.


Frequently asked questions


Why doesn't my GTM trigger fire on mobile?


If your published Maglr page has a mobile layout, every scene and element on it has a separate ID for the desktop layout (ending in _1) and for the mobile layout (ending in _2). Visitors on screens 500px wide or less see the mobile layout, so a trigger set to the desktop ID doesn't fire for them. Add a trigger for the mobile ID, or use one trigger with Selection Method set to CSS Selector and both IDs, each with a # in front, separated by a comma.


Why did my GTM trigger stop firing?


The ID in the trigger most likely no longer matches an ID on the published page. Scene and element IDs include the ID of the page they're on, so:


  • a duplicated page, or a page copied to another project, gets new IDs for all its scenes and elements
  • a copied element gets a new ID


Republishing the same page keeps its IDs. Open the published page, find the current ID in its HTML and update the trigger.


If the IDs still match, check the scene's height. GTM fires an Element Visibility trigger when at least 50% of the scene is on screen by default, which never happens for a scene more than twice as tall as the screen. Lower Minimum Percent Visible, or use the ID of an element near the top of the scene.


Can I track pop-up opens without finding IDs?


Yes. Maglr sends a Popup event to GTM when a pop-up opens or closes, with the pop-up's name. See Connect Maglr events with Google Tag Manager.

Updated on: 27/10/2026