【タグ連携するなら】Google Tag Manager(グーグルタグマネージャー)の使い方・導入方法・ツールでできること

Google Tag Managerの使い方・導入方法・ツールでできること Uncategorized
この記事は約6分で読めます。
スポンサーリンク
スポンサーリンク

なくてもいいけどあるととても便利、Webツールと連携するならGoogle Tag Managerは入れておきましょう

Google関連ツールの導入方法について解説3記事目は、「Google Tag Manager(グーグルタグマネージャー)」です。他の2つと比べると使う機会は少ないかもしれませんが、世の様々なツールとコラボレーションする際には、使い方を知っておくと非常に便利なツールです!

(再掲)ツール導入するタイミングは?
・WebサイトのDNS切り替え設定が終了している
・サイト公開後に行うのが望ましい(独自ドメインへの切り替え前だと設定することができない)
という前提を踏まえて、以下のツール連携を行います。

前回の記事(Google Analyticsの使い方・導入方法・IPアドレスの除外設定)https://miyakoshiyuumei.com/google-analytics/

Google Analyticsの導入方法についてはこちら

Google Search Consoleの導入方法についてはこちら

Google Tag Managerはこんな方におすすめです

様々な分析系ツール/MA系/チャットボットツールを入れたいと思っている方向けです。ヒートマップを使ってページの分析をしたい!という場合や、サイト運用するために広告を出すことになり、代理店から「タグ入れてください」と言われた・・・などといった時に大活躍するのがGoogle Tag Manager(通称GTM)です。

導入目的

・様々なツールを自分のサイトに連携するため
・すでにタグを複数入れている場合、管理できるようにする
・必要に応じてOn/Offの切り替え、タグ削除が可能

GTMを導入することで何ができるのか?

そもそも「Webサイトの中にタグを入れる」という行為については、すなわち「WebサイトのHTMLコード内に外部のコードを入れる」ということになります。WebサイトはHTMLという言語でコードが書かれ、それをChromeなどのWebブラウザが読み取って「こんな感じね」と表示する仕組みで出来ています。

それらを読み込む時に、分析するために裏で色々なツールが実は動いているのですが、Webサイトを読み込んだ時にタグ(外部のコード)を予め入れておくことで、様々なツールとのコラボレーションが可能になります。ただ、タグを大元のソースコードにいちいち入れていたら、「あれ、このタグ入ってたっけ・・・?」とすぐ管理がおぼつかなくなります。

そこでタグ管理ツールであるGTMの出番というわけですね!

例えばGTMを活用することで、以下のようなことが可能になります。

・広告タグ(コンバージョンタグ・トラッキングタグなど)の入れ込み
・チャットボットの導入
・ヒートマップツールの導入
・Salesforce/Pardot関連のタグの埋め込み

・Google Analyticsのトラッキングコードの埋め込み
等があります。

一度入れてさえおけば、あとはGTM上で複数のタグの管理を行っていくことになります。追加して、要らなくなったら削除ということもかんたんにできるようになります。

Google tag Managerの導入方法

1.GTMのアクティベート:ログイン・アカウント名/コンテナ名を登録

Googleタグマネージャについては、下記URLを見てください。
https://www.google.com/intl/ja/tagmanager/

上記URLよりGoogleのアカウントでGTMにログインし、アカウント名とコンテナ名を登録します。

アカウント:会社名、サービス名等を登録。
コンテナ:GAで言うところのプロパティ(Webサイト)単位のこと。1コンテナあたり1ドメインのWebサイトのタグを管理出来る。

Google Tag Manager アカウント登録

2.コードを表示させる

Googleタグマネージャのコード(タグ)を表示させます。

Google Tag Manager HTMLタグ表示
赤い所を押します

表示されたコード上部のみをコピーします。

コピーした上部のコードを自サイトのHTMLコードに挿入します。(場所は<head>タグの下)※WordPressの場合はテーマの設定内の「header.php」の<head>タグの直下に埋め込みます。

Google Tag Manager HTMLタグ

以上でGoogleタグマネージャの設定は完了です。

実際にGoogle Tag Managerを使ってWebサイト内へタグを導入する方法について

事前準備
以降の手順では、タグを埋め込みたいサイトをGoogleタグマネージャの「コンテナ」として設定済みであることを前提としています。事前にコンテナを作成していない場合は、まずコンテナを作成してください。

コンテナを作成済みの場合は、Googleタグマネージャ管理画面から「タグを埋め込みたいサイトのコンテナ」を選択して、コンテナの管理画面に移動してください。

1.Googleタグマネージャーにログインし、ワークスペースを表示します。

Google Tag Manager ホーム画面

2.コンテナ管理画面の左側メニューから「タグ」をクリックしてください。

Google Tag Manager タグ選択
赤い所を押します

3.表示されている「新規」ボタンをクリックします。

4.左上の「名前のないタグ」と表示されている部分に、任意のタグの名称を設定します。

5.「カスタムHTMLタグ」を選択します。

Google Tag Manager タグ選択
赤い所を押します

6.「2 タグを設定」の「HTML」入力欄に「計測タグ」を設置します。

※「計測タグ」は各外部サービスより取得し、コピーして貼り付けてください。
※タグの取得方法は各サービスのヘルプにお問い合わせください。

7.「続行」ボタンをクリックします。

8.「配信するタイミング」の「すべてのページ」を選択します。

Google Tag Manager 配信するタイミング
赤い所を押します

【注意】
マーケティングオートメーション(MA)の設定の場合などは、すべてのページではなくフォームコンバージョン後のサンクスページを踏んだユーザーに対してのみタグを発火させる等の場合はサンクスページだけを選ぶため、「一部のページ」に設定することもあります。(大半はすべてのページ=All Pagesでよいはず)

9.「タグを作成」をクリックして「手順8」までの設定内容を保存します。

タグを作成

10.画面右側の「公開」をクリックしてタグを公開します。

どこに入れるのか

お疲れさまでした。これで導入完了です!
GTMの活用メリットとしては、上記であげたタグの管理がかんたんになることと、直接タグをWebサイトのソースコードに入れて読み込ませる必要もないため、ページの読み込みスピードも向上します。

このGTMの概念はめちゃくちゃ難しくて、自分も理解にはかなりの期間を要しました。。。でも一番手っ取り早いのは自分でやってみることなので、かなり複雑ではありますが連携作業をやってみると、とても勉強になりますよー!

コメント

タイトルとURLをコピーしました