How to retrieve content displayed when clicking on a mobile floating banner?

In recent times, smartphones have become widespread, leading to the proliferation of websites optimized for mobile devices. Consequently, it’s common to see layouts featuring elements like banners that stick to the screen even when scrolling, typically positioned at the bottom of the screen. These are commonly referred to as floating banners.

Particularly on landing pages originating from advertisements, it’s typical for the main content to showcase product information, while users interested in more details click on the floating banner to proceed to the next step.

When measuring the effectiveness of such landing pages, one useful metric could be determining which content was being viewed when the floating banner was clicked. Wouldn’t it be valuable to know which blocks were being displayed and accessed?

  1. Essential Approach: Maintaining the Latest Information with “Element Display” Triggers and dataLayer.push
  2. Specific Methods:
  3. Key Points to Note in this Approach

Essential Concept: Maintaining the Latest Information with “Element Display” Triggers and dataLayer.push

As a premise, within the functionality of GTM, it’s not possible to directly obtain “what is currently being displayed.”

In theory, with the user-defined variable “element visibility,” you can retrieve the status of specific elements, but it’s more of a “theoretically possible but highly impractical” situation.

Because you can only retrieve the status of one element per variable, the configurations within GTM become complicated. In this case, you cannot directly obtain “what is currently being displayed.”

However, you can detect “when something is displayed” using element display triggers. This is what we’ll utilize.

So, the approach is as follows:

If we can continuously update a variable with “the currently displayed block” every time a block is displayed, then at any given point, we should be able to determine that “the last displayed block equals the currently displayed block.”

Specific Methods:

  1. Prepare a variable to indicate “the currently displayed block” using a data layer variable.
  • Variable Type: Data Layer Variable
  • Data Layer Variable Name: view_content_block (※ Optionally changeable)
  • Data Layer Version: Version 2 (Default)
  • Set Default Value: ON
  • Default Value: (first view) (※ Name of the value to be measured when at the top of the page. Optionally changeable)
  1. Prepare an “element display trigger” that reacts when each block is displayed.
  • Trigger Type: Element Display
  • Selection Method: (Dependent on the page)
  • Timing to Trigger: Whenever each element is displayed on the screen
  • Minimum Visibility Threshold: (Dependent on the page) (For elements within blocks, use small decimal values like 10-20, for headings use larger values like 100)
  • Set Minimum Display Time on Screen: ON
  • 2000 (※ Optionally changeable)
  • Monitor DOM Changes: OFF (※ Turn ON if the page involves AJAX, SPA, Lazy Load, etc.)
  • Location of Trigger Occurrence: Some display events
  • (Set conditions to specify the target page. If it applies to the entire site, use “all display events.”)
  1. Activate the built-in Click Element variable.
  1. Register a custom HTML tag with a delivery trigger attached to update variable [1].

Tag Type: Custom HTML Tag
HTML:
※ The data layer variable name is the same as the one registered for variable [1].
※ The method of obtaining variable values may need adjustment depending on the page.
Support for document.write: OFF
Delivery Trigger: [2]

  1. Set variable [1] as the measurement value for tracking floating banner clicks.

That’s the general idea. However, in reality, the crucial settings for triggers and variables largely depend on the page structure, mainly HTML.

Let me provide a few examples.

Page Structure Prerequisites

As a fundamental requirement for the method being introduced here:

  • There should be a floating banner (a banner that stays within the screen even when scrolling).
  • The page layout should be in a single-column format.

It’s worth noting that many websites adopt a responsive design where the layout changes to multiple columns when viewed on a PC.

In such cases, adjustments need to be made in trigger settings and so forth, so please be mindful of that.

For instance, you might need to set it up so that it doesn’t trigger on anything other than smartphones by referencing the user agent.

Now, the actual selection of “element display” triggers and the setting of “custom HTML tags to retrieve displayed blocks” (as data layer variable values) vary greatly depending on the structure of the page.

This largely differs based on the HTML structure, so some knowledge of HTML and CSS might be necessary.

If we’re considering the most general pattern, it would be as follows:

Method: When heading tags are installed for each block

For instance, this applies to pages where the HTML document structure is as follows:

<div>
	<section>
		<h2>ブロックA</h2>
	</section>
	<section>
		<h2>ブロックB</h2>
		<section>
			<h3>ブロックB-1</h3>
		</section>
		<section>
			<h3>ブロックB-2</h3>
		</section>
	</section>
	<section>
		<h2>ブロックC</h2>
	</section>
</div>

Each block is defined using the section tag, right?

Additionally, even if it’s not using the section tag, for instance, if there’s a “block-specific” class defined like <div class="block">, it’s similar.

And each block should have a heading indicating the block name, right?

In such cases, by targeting each heading, updating the displayed blocks can also be done smoothly.

  • “Element Display” Trigger Selection Method:
    • Selection Method: CSS Selector
    • Element Selector: h1, h2, h3, h4, h5, h6
    • Minimum Visibility Threshold: 100
      • ※ If the trigger does not respond when tested in preview, please decrease the value.
  • Custom HTML Tag for “Displayed Block Update”:
    • Custom HTML Tag:
      • ※ Please enable the built-in Click Text variable.

If there are cases where images are placed within heading tags instead of text, the above method (retrieving the alt attribute value of the image) won’t work.

In such cases, please refer to the article “How to Get the alt of an Image in a Link Clicked in GTM” for the JavaScript and adjust accordingly.

Method: Other

Now, HTML structures vary greatly from one page to another, so the methods also differ greatly.

However, the key points for the setup method are:

  1. Specify each block or the element you want to extract as the “block name” using CSS selector in the “Element Display” trigger.
  2. Since the Click Element variable stores the entire selected (responding) element from the “Element Display” trigger, write JavaScript in a Custom HTML tag. If the selected element is a block, use the querySelector function (which returns the first element that matches a specified CSS selector). If the selected element is the one you want to extract as the “block name”, use functions like innerText (which returns the text content of the specified element). By doing this, you can extract the desired information as the “block name” and update the data layer variable with dataLayer.push.

That’s the point.

Basics of CSS Selectors:

  • Format for “specifying elements” in CSS.
  • Tag Name (Example: h1) ⇒ HTML elements of any HTML tag (Example: h1 tag)
  • .class name (Example: .block) ⇒ HTML elements with any class assigned (Example: elements with the class attribute as “block”)
  • #id name (Example: #content) ⇒ HTML elements with any id assigned (Example: elements with id=”content”)
  • , ⇒ Separator for writing multiple conditions (Example: h1, h2, h3, h4, h5, h6 ⇒ h1 tag or h2 tag or h3 tag or …)
  • (Space) ⇒ Specifies parent-child structure (Example: .block h1 ⇒ h1 tag inside elements with the class “block”)

Basic Overview of JavaScript for this Occasion:

  • A programming language processed within the user’s browser.
  • ; ⇒ Placed at the end of a line, indicating the end of a statement or process.
  • . ⇒ Indicates parent-child relationships or targets for operations. (Example: A.B ⇒ B belonging to A)
  • {{Click Element}} ⇒ References the value of the Click Element variable. In the context of the “Element Display” trigger, it contains the HTML element that triggered the event.
  • querySelector(“CSS Selector”) ⇒ Returns the first (topmost) HTML element within the target element that matches the CSS selector specified in the parentheses. (Example: {{Click Element}}.querySelector(‘h1, h2, h3, h4, h5, h6’) ⇒ Retrieves the HTML element of the first heading tag within the element that triggered the “Element Display” trigger.)
  • innerText ⇒ Extracts and retrieves only the text content within the target element. (Example: {{Click Element}}.querySelector(‘h1’).innerText ⇒ Retrieves the text content within the first h1 tag within the element that triggered the “Element Display” trigger.)

I’ll refrain from providing detailed explanations of CSS selectors and JavaScript as it may deviate from the main purpose of this article and become too extensive. However, if you have someone knowledgeable nearby, such as an engineer, consulting them may help resolve any issues.

Key Points to Note in this Method:

The biggest point to note is that it depends on the page’s HTML structure and layout.

In other words, without a proper understanding of the HTML structure of the target page, it will be difficult to use.

Furthermore, the method relies on continuously updating the “currently displayed block” every time the specified element is displayed using the “Element Display” trigger.

As a result, if multiple target elements appear on the screen simultaneously, the block name of the element that appears later will be updated.

In other words, the accuracy is not extremely high, so please use it as a rough measurement guideline after understanding this behavior.

This method introduced here is of the sort that isn’t implemented by default but can be achieved through clever techniques.

Although the example focuses on floating banners, the main point of this article is actually how versatile the “Element Display” trigger can be.

There are various other possibilities, and if you come across something like, “Wow, I did this and it’s amazing!” please feel free to share it with everyone, it would be heartwarming.

ayu_master