🔖

Google Tag Managerで設定したタグは非同期タグとして扱われる

2021/05/28に公開

SEO

Google Tag Manager

tech

Google Tag Managerで設定したタグは、非同期タグとして扱われます。

Google Tag Managerはスニペットをサイトに埋め込むことによって使うことができます。
ウェブサイトに導入するタグは、下記の2つです。

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

スニペットの内部に非同期読み込みを実行する async=true が埋め込まれています。

非同期構文

非同期構文の仕組み

Google タグマネージャーは非同期タグであり、実行時に他のページ要素の表示が妨げられることはありません。また、Google タグマネージャーで管理するその他のタグも非同期であるため、読み込みに時間がかかるタグがあっても、その他のトラッキングタグの妨げになることはありません。

非同期構文を可能にしているのは、dataLayer オブジェクトです。これは、先入れ先出しのデータ構造を持つキューとして機能し、API 呼び出しを収集します。タグは、その API 呼び出しに従って配信されます。キューに何かを追加するには、dataLayer.push メソッドを使用します。dataLayer.push メソッドを使用すると、変数を介して追加のメタデータを Google タグマネージャーに渡したり、イベントを指定したりすることができます。

参考：
クイックスタートガイド | ウェブトラッキング向け Google タグマネージャー | Google Developers
デベロッパーガイド | ウェブトラッキング向け Google タグマネージャー | Google Developers
※2021/5月時点の調査です。

非同期構文

Discussion