【GTM】Googleタグマネージャーとは？｜株式会社ParaLux

2021.09.29

【GTM】Googleタグマネージャーとは？

nishioR

今回はサイトを分析するには欠かせないGoogleタグマネージャーについての解説です！
GTMという略称で呼ばれることも多いですね！
ミーティングにて初めてGTMと聞いた時は、何だそれは・・・とコッソリ調べたことは内緒です。笑

Googleタグマネージャーって何？

Googleタグマネージャーとは名前からもわかるとおり、Googleから提供されているタグをまとめて管理することができるツールになっております。

Googleタグマネージャーをサイトに導入し、設定や変更を行うワークスペースにGoogleアナリティクスや、Google広告などのタグを登録すると、HTMLの編集をしなくてもタグの追加や修正を行うことができます！

・・・なんかわかりそうでわからないですよね。笑
どんなことができるのか？わかりやすく解説していきますね！

Googleタグマネージャーの魅力的な機能

お伝えさせて頂きたいと感じた魅力的な機能をまとめました！
この記事を読み終わるころには・・・サイトにGoogleタグマネージャーを導入していることでしょう。笑

タグをまとめて格納できる

基本的にはサイトに『このツールを導入したいなー。』とか、『集客を計測したいなー。』となった時に、それぞれのツールから指定されたタグをHTMLのhead内に記入する必要があります。
ということはFacebookピクセルや、Googleアナリティクスなどの分析ツールを導入すればするほど、下記コードのようにタグは膨大な量になってきてしまいます。

  <!-- Facebook Pixel Code -->
	<script>
		!function(f,b,e,v,n,t,s)
		{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
		n.callMethod.apply(n,arguments):n.queue.push(arguments)};
		if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
		n.queue=[];t=b.createElement(e);t.async=!0;
		t.src=v;s=b.getElementsByTagName(e)[0];
		s.parentNode.insertBefore(t,s)}(window, document,'script',
		'https://connect.facebook.net/en_US/fbevents.js');
		fbq('init', 'xxxxxxxxxxxxxxx');
		fbq('track', 'PageView');
	</script>
  <!-- End Facebook Pixel Code -->
  <!-- Global site tag (gtag.js) - Google Analytics -->                                        			                
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-x"></script>
   <script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());

	  gtag('config', 'xxxxxxxxx-x');
   </script>
  <!-- Global site tag (gtag.js) - Google Ads: xxxxxxxxx → -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=AW-123456789"></script>
   <script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
                gtag('set', 'linker', {
		'domains': ['landing-destination.com', 'conversion
                -destination.com']
		});
		gtag('js', new Date());
		gtag('config', 'AW-xxxxxxxxx');
   </script>
 </head>

そこでGoogleタグマネージャーの出番です！
下記コードにGoogleタグマネージャーを導入します。

<head>
	<!-- 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','xxx-xxxxxxx');
	</script>
	<!-- End Google Tag Manager -->

え？これだけですか・・・？
そうなんです！これだけなんです！

Googleタグマネージャーは様々なツールを格納する箱のような役割になってくれるので、新たなツールを導入したい！となった時も、Googleタグマネージャーを導入していればHTMLに毎回指定されたタグを記入する必要はありません！
Googleタグマネージャーのワークスペースから各種ツールのタグを登録するだけ！

HTMLのページに毎回ツールごとに１つずつタグを記入しているのであれば、作業時間の短縮や、タグを少なくすることでページの読み込み速度の短縮にも繋がります！