Googleタグマネージャ:利用にあたっての初期設定と計測タグの作成

こんにちは、ヘビー・デスクワーカーの高田です(プロフィール)。

Googleタグマネージャ(GTA)を利用して、外部リンクのクリックをGoogleアナリティクスで計測する方法を紹介しています。長くなったので 記事を分けています。

  1. タグマネージャ:導入時に最初に行う基本設定
  2. タグマネージャ:外部リンクのクリック(イベント)を計測する方法
  3. タグマネージャ:作成したタグ(イベント)の挙動を確認する方法
  4. アナリティクス:外部リンクのクリックを「目標」に設定する方法

 
今回は「1. Googleタグマネージャ:利用にあたっての初期設定と計測タグの作成」です。

注意

既に タグマネージャのアカウント自体は取得済みであることを前提に、新規に運営サイトを登録し(=コンテナの作成)Googleアナリティクスと連携させるまでの手順になります。

タグマネージャの基本構造

具体的な設定手順の紹介の前に、Googleタグマネージャを管理する際の基本的な構造を理解しておきましょう。

アカウントとコンテナの関係

タグマネージャは「アカウント > コンテナ」という階層構造を持っています。

アカウントもコンテナも複数作成できるので、具体的にどの要素を「アカウント」に割り当て、また何を「コンテナ」に割り当てるか最初は戸惑うと思います。

基本的には以下のように考えると良いようです。

  • アカウント:管理する人間ごとに作成
  • コンテナ:管理するサイトごとに作成

私の場合、個人で複数サイトを運営しているので、1つの「アカウント」のもとで、複数の「コンテナ」を作成し、この各コンテナに管理サイトをそれぞれ振り分けて管理しています。

導入時の初期設定

まずは タグマネージャを使用するにあたっての初期設定を行います。

運営サイトの登録(コンテナの作成)

タグマネージャにログインしたらアカウント右側の「・・・(縦)」をクリックして「コンテナを作成」を選択。

コンテナの作成画面になったら「コンテナ名」に 適当な名前(サイト名、ドメインなど)を入力し、「ターゲットプラットフォーム:ウェブ」を選んで「作成」ボタンを押します。

すると以下のような、タグマネージャのスニペットが表示されるので、これをコピーします。

MEMO

以前は張り付けるスニペットは1個でしたが、2020年現在はスニペットが2個になっています。

後からスニペットを取得する場合は?

後から スニペットを取得する場合は、コンテナのワークスペース画面(アカウント画面で各コンテナのリンクをクリックすると表示される)の ID部分をクリックすると表示できます。

スニペットを運営サイトに挿入する

タグマネージャを利用するためには、上記のスニペットを 運営サイト側に挿入する必要があります。

先程 取得した2つのスニペットを「1. <head>内のなるべく上の方」「2. <body>直後 」にそれぞれ入れ込みます。

MEMO

スニペットを挿入する際は、テーマのphpファイルに直接書き込むのではなく、子テーマ側に挿入すると、後々メンテナンスが楽になります。このブログで使用しているSTORKの場合「header.php」を子テーマとして準備し、スニペットを挿入します。

以上で、タグマネージャを使用するための初期設定は終了です。

アナリティクスの計測コードを削除する

この後で、タグマネージャ側で データ計測を行うタグを作成するので、これまでのGoogleアナリティクスの計測用タグは削除しましょう。

例えば、このブログが利用しているWordPressのテーマ「Stork」であれば、「外観 > カスタマイズ > アクセス解析コード」に設定していたコードを削除します。

注意

作業の間 アナリティクスの計測を中断させたくないという方は、「アナリティクスIDコード」の削除は、この後で作成するタグマネージャ側の計測タグの設定が終わってからでも大丈夫です。

計測用タグを作成する

続いて、タグマネージャ側で 計測用タグを作成していきましょう。

MEMO

タグマネージャでは 様々なタイプの計測タグを作成できますが、ここでは通常のアナリティクスの計測と同じ働きをするものを作成していきます。

タグマネージャに戻り、当該コンテナのサイドメニューから「タグ」を選択。

「タグ」画面になったら「新規」ボタンをクリックします。

タグの設定

タグの作成画面になりますので、まずは「タグの設定」部分をクリック。

「タグタイプを選択」画面になったら「Googleアナリティクス:ユニバーサルアナリティクス」を選択します。

「変数の設定」画面が開いたら、トラッキングID部分に、自分のアナリティクスID(UA-xxxxxxxx-1)を記入します。※他はデフォルトのまま

適当に名前をつけて保存します。

トリガーの設定

続いてトリガーの設定です。

画面下部のトリガー部分をクリック。

「トリガーの選択」で「All Pages」を選択します。

画面右上の「保存」ボタンをクリックします。

適当な名前を付けます。

以上で、タグの設定は終了です

公開する

このままだと、まだこのタグは有効化されていません。

最後に「公開」処理を行う必要があります。画面右上の「公開」をクリック。

バージョン名などを適当に入力して(空欄でも可)再度「公開」ボタンをクリック。

以下のような画面になれば、タグの設定&公開は終了です。

確認する

タグマネージャを設定したサイトを開いて、Googleアナリティクスの「リアルタイム > 概要」で、クリックがちゃんと反映されるか確認してみましょう。

まとめ

というわけで、ひとまずタグマネージャの基本的な導入方法と、アナリティクスの計測タグの差し替えを紹介しました。

  1. タグマネージャ:導入時に最初に行う基本設定
  2. タグマネージャ:外部リンクのクリック(イベント)を計測する方法
  3. タグマネージャ:作成したタグ(イベント)の挙動を確認する方法
  4. アナリティクス:外部リンクのクリックを「目標」に設定する方法