🔖

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

2021/05/28に公開約1,500字

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

ログインするとコメントできます