アクセス解析ツール「アナトミー」

ANATOMY BLOG

Googleアナリティクスを「見える化」するアクセス解析ツール「ANATOMY(アナトミー)」のブログです

2020年2月4日火曜日

はじめてのGoogleタグマネージャー 使い方ガイド | Googleタグマネージャー

Google タグマネージャーを初めて使う方向けに、Google タグマネージャーの概要と使い道、基本の操作法を説明します。

Google タグマネージャーを使いこなせるようになると、解析ツールの導入やボタンのクリックイベント計測など、Googleタグマネージャーを通して自分自身で行うことができます。ぜひ、使い方をマスターしてアクセス解析に役立てましょう。

Googleタグマネージャーは何のためにあるのか?

詳しい使い方の前に、「Googleタグマネージャーはどんなことをしてくれるツールなのか」を理解しておきましょう。

ウェブサイトのアクセス解析を行う場合、専用の計測タグを使いますよね。たとえば、Google アナリティクスを使うには、次のような script タグを HTML に埋め込む必要があります。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX-X');
</script>
その後、別ドメインのサイトを含めたクロスドメイン分析が必要になったとしましょう。すると、今度は先ほどのscriptタグを次のように修正する必要があります。
  gtag('config', 'UA-XXXXXX-X', {
    'linker': {
      'domains': ['www.example.com', 'blog.example.com']
    }
  });
さらにその後、バナーのクリック数を計測したくなったとしましょう。その場合も、該当するページにscriptタグを追加する必要があります。
<script>
  document.querySelector("a.banner").addEventListener("click", function(event) {
    var url = event.currentTarget.href;
    event.preventDefault();
    gtag('event', ‘click’, {
      'event_category': ‘banner’,
      'event_label': ‘discount2020spring’,
      'event_callback': function() {
        location = url;
      }
    });
  });
</script>
このように、サイトの分析活動を行えば行うほど、ページへのタグ追加・修正が必要になるのです。ページ数が少なければ、HTML 修正作業がそれほど負担になることはありません。ですが、サイト規模が大きかったり、CMS や EC パッケージなど様々なシステムが絡んでくると、タグを追加・変更する作業自体が困難になってきます。

Google タグマネージャーは、このような計測タグの追加・更新にまつわる課題を解決します。具体的に言うと、「HTML 上のタグを書き換えることなく、サイト分析担当者が自分で計測タグを追加できる」ようになるのです。

Googleタグマネージャーが「できること」

Google タグマネージャーがカバーするエリアは広く、アクセス解析など Web マーケティングに関連したほとんどの作業を行うことができます。


設置するタグ 分析機能
Google アナリティクス タグ ・ページビューの計測
・イベントの計測(バナークリックなど)
・Eコマースサイトの計測(購入など)
Google 広告 タグ ・コンバージョンの計測
・リマーケティング
GoogleOptimize タグ ・ABテストの実施
Facebook Pixel タグ ・広告の効果測定
Twitter Universal Website Tag ・広告のエンゲージメント測定

Googleアナリティクス タグを設置する

それでは実際に Google タグマネージャーを使って、Google アナリティクスを設置する手順を説明します。

1.Google タグマネージャーのアカウント・コンテナを作成

Google タグマネージャーのサイトを開き、アカウントを作成します。

任意のアカウント名、国、任意のコンテナ名を入力します。ターゲットプラットフォームは「ウェブ」を選択し、[作成]ボタンをクリックします。


2.HTML に Google タグマネージャーのタグを埋め込む

画面に表示された「Google タグマネージャーの script タグ」を HTML へ埋め込みます。


この script タグだけは必要なので、全ページに入れておきましょう。
<head>タグ直後と、<body> 直後にコードを貼り付けます。

3.Google タグマネージャーで「タグ」を追加する

1. [新しいタグを追加] をクリックします

2. [タグの設定] をクリックします

3.「Googleアナリティクス:ユニバーサルアナリティクス」を選択します

4.「Googleアナリティクス変数」のセレクトボックスで、[新しい変数...] をクリックします

5.トラッキング ID 欄に Google アナリティクスのトラッキング ID(”UA-XXXXXX-XX”形式)を入力します

6. 変数の名前(ページ最上部)は「Google アナリティクス設定」などを指定し、[保存]をクリックします

7. [トリガー]をクリックします

8. [All Pages] を選択します

9. タグの名前(ページ最上部)に「Googleアナリティクス」などと入力し、[保存] をクリックします

これで Google アナリティクスのタグ設定が完了しました。

4.変更内容を公開する

Google タグマネージャで行った変更は即時反映されません。「公開」を行うことで実際のサイトに反映されます。

Google アナリティクスのリアルタイムで確認してみてください。計測できましたか?

Googleタグマネージャーを使いこなそう

以上、Google タグマネージャの概要と Google アナリティクスタグの設置手順を説明しました。

Google タグマネージャには、変更履歴をバージョン管理できたり、設定のプレビューができたりするので、設定変更の敷居が低く、いざという時に元に戻せるので安心です。Google タグマネージャーを活用し、高度なアクセス解析を進めていきましょう。

シンメトリックでは Google アナリティクスを「見える化」するアクセス解析ツール
Anatomy」を扱っています。
設定に不安がある方は、「Google アナリティクス設定チェックサービス」もご用意しておりますので是非ご相談ください。

関連記事