<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ochtum</title>
    <description>The latest articles on DEV Community by Ochtum (@ochtum).</description>
    <link>https://dev.to/ochtum</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2705443%2F49d6e56e-9a27-4d5c-91d7-55cdd0526242.png</url>
      <title>DEV Community: Ochtum</title>
      <link>https://dev.to/ochtum</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ochtum"/>
    <language>en</language>
    <item>
      <title>Firing order of tags in Google Tag Manager</title>
      <dc:creator>Ochtum</dc:creator>
      <pubDate>Mon, 26 May 2025 16:22:11 +0000</pubDate>
      <link>https://dev.to/ochtum/firing-order-of-tags-in-google-tag-manager-5h22</link>
      <guid>https://dev.to/ochtum/firing-order-of-tags-in-google-tag-manager-5h22</guid>
      <description>&lt;h2&gt;
  
  
  1. Target Audience for This Article
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Beginners in Google Tag Manager&lt;/li&gt;
&lt;li&gt;Those who want to create custom events&lt;/li&gt;
&lt;li&gt;Those who want to write custom HTML tags&lt;/li&gt;
&lt;li&gt;People who have set tag firing priority but it's not working as expected&lt;/li&gt;
&lt;li&gt;People who are unsure about the differences between tag firing priority and tag sequencing&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  2. Introduction
&lt;/h2&gt;

&lt;p&gt;This article is written for beginners in Google Tag Manager (GTM) and aims to explain the concept of tag firing priority, which can easily become a trap if misunderstood.&lt;/p&gt;

&lt;p&gt;The issue lies in how the Japanese version of the official documentation can be interpreted — it may give the impression that simply setting tag firing priority ensures proper execution order.&lt;/p&gt;

&lt;p&gt;However, when reading the &lt;a href="https://support.google.com/tagmanager/answer/2772421?hl=en" rel="noopener noreferrer"&gt;official documentation in English&lt;/a&gt;, it clearly states:&lt;br&gt;
“To control more precisely, use tag sequencing to specify which tags should fire before or after others.”&lt;/p&gt;

&lt;p&gt;This implies that Google does not guarantee precise control over tag firing using only "Tag firing priority."&lt;/p&gt;

&lt;p&gt;For instance, if different triggers are used, or if a tag fires multiple custom events, then tags triggered by those events may not necessarily respect the defined priority.&lt;/p&gt;

&lt;p&gt;So how exactly does tag firing work, and how should we handle custom events?&lt;/p&gt;


&lt;h2&gt;
  
  
  3. What Exactly is a Custom Event?
&lt;/h2&gt;

&lt;p&gt;Custom events can generally be categorized into three types:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Events used to &lt;em&gt;create&lt;/em&gt; triggers in GTM&lt;/li&gt;
&lt;li&gt;Events used to &lt;em&gt;fire&lt;/em&gt; those triggers&lt;/li&gt;
&lt;li&gt;Events &lt;em&gt;sent to Google Analytics&lt;/em&gt; as custom events&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Items (1) and (2) work as a pair.&lt;/p&gt;

&lt;p&gt;To begin, you use JavaScript to push a custom event to the &lt;a href="https://developers.google.com/tag-platform/tag-manager/datalayer?hl=ja#how_data_layer_information_is_processed" rel="noopener noreferrer"&gt;dataLayer&lt;/a&gt;, like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="err"&gt;dataLayer.push(&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="err"&gt;'event':&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;'custom_event'&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="err"&gt;);&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This script is usually placed inside a Custom HTML tag that fires on a page view or initialization event.&lt;/p&gt;

&lt;p&gt;Since you use JavaScript, it's also possible to create highly flexible custom events using &lt;code&gt;addEventListener&lt;/code&gt;, etc.&lt;/p&gt;

&lt;p&gt;Next, you create a new trigger in GTM, set its type to “Custom Event,” and specify the same event name that you pushed to the dataLayer. Then, you attach this trigger to any tag you want to fire.&lt;/p&gt;

&lt;p&gt;As for events sent to Google Analytics as custom events, you can do this by using a tag of type &lt;code&gt;Google Analytics: GA4 Event&lt;/code&gt; and giving it any custom event name.&lt;/p&gt;

&lt;p&gt;More details are available in the &lt;a href="https://developers.google.com/analytics/devguides/collection/ga4/events?hl=ja&amp;amp;client_type=gtm" rel="noopener noreferrer"&gt;GA documentation&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Note: You can also use &lt;code&gt;gtag&lt;/code&gt; functions within Custom HTML to send custom events, but this requires using both GTM and GA tags in tandem.&lt;/p&gt;




&lt;h2&gt;
  
  
  4. Understanding Tag Firing Order
&lt;/h2&gt;

&lt;p&gt;There are three main concepts for controlling tag firing order. In increasing order of granularity:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Firing tags using different triggers&lt;/li&gt;
&lt;li&gt;Using tag sequencing&lt;/li&gt;
&lt;li&gt;Using tag firing priority&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Keep in mind that (3) may not work as expected if the tags are triggered by different triggers.&lt;/p&gt;

&lt;h3&gt;
  
  
  (1) Firing Tags Using Triggers
&lt;/h3&gt;

&lt;p&gt;You can use built-in triggers such as "Page View," or define new ones like "DOM Ready" or "Window Loaded" to control when a tag fires.&lt;/p&gt;

&lt;p&gt;You can also create your own custom events and use those as triggers. This involves pushing an object containing an &lt;code&gt;event&lt;/code&gt; property to the &lt;code&gt;dataLayer&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;This method is useful when you want to conditionally fire tags — for example, based on whether a specific form field is shown or depending on the user’s selection on a previous page.&lt;/p&gt;

&lt;p&gt;Here’s an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
window.dataLayer = window.dataLayer || [];
dataLayer.push({'event': 'your_custom_event_name'});
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To use this, create a trigger of type “Custom Event” in GTM and specify the name you used in the &lt;code&gt;dataLayer.push()&lt;/code&gt; call. Then, assign this trigger to your tag.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwipf07dbh16xylhyozeq.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwipf07dbh16xylhyozeq.jpg" alt="Custom Event Trigger Example" width="800" height="261"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  (2) Tag Sequencing
&lt;/h3&gt;

&lt;p&gt;This is useful when there is a dependency between tags.&lt;/p&gt;

&lt;p&gt;If you have large processing logic that you'd like to break into separate tags or want to reuse initialization logic, tag sequencing makes it easier.&lt;/p&gt;

&lt;p&gt;You can configure one tag to fire only after another completes, or set a tag to fire before another.&lt;/p&gt;

&lt;h3&gt;
  
  
  (3) Tag Firing Priority
&lt;/h3&gt;

&lt;p&gt;When multiple tags are set to fire from the same trigger (e.g., a Page View), the one with the higher priority number will attempt to fire first. The default value is &lt;code&gt;0&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;For example, advertising platforms like Facebook may instruct you to “place this tag near the top” or “at the end.” This is where firing priority helps.&lt;/p&gt;




&lt;h2&gt;
  
  
  5. Conclusion
&lt;/h2&gt;

&lt;p&gt;Using Google Tag Manager becomes increasingly beneficial if you often need to insert or update scripts on your site. Common scenarios include:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;You're currently using or plan to use web advertising for traffic&lt;/li&gt;
&lt;li&gt;You manage multiple sites and want a scalable way to handle changes&lt;/li&gt;
&lt;li&gt;You run an e-commerce site and want to analyze user behavior&lt;/li&gt;
&lt;li&gt;You have a unique site or web app where standard tracking doesn’t suffice&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In particular, point (4) is quite relevant for web applications — you may have a multi-tenant setup and need to analyze by tenant, or perhaps you've changed your UI and need to update your scripts accordingly.&lt;/p&gt;

&lt;p&gt;In such cases, GTM becomes a powerful tool.&lt;/p&gt;

&lt;p&gt;Moreover, working with GTM is a great way to learn JavaScript. If you manage your own website, this is a great opportunity to give it a try.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>googletagmanager</category>
      <category>gtm</category>
      <category>googleanalytics</category>
    </item>
  </channel>
</rss>
