こんにちは、キノトロープアカデミーです。

「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。

＜Web担当者編第26回＞
Googleタグマネージャーの特徴と導入方法
についてお伝えします。

担当は濱田です。

この講座では、2回にわたってGoogleタグマネージャーの使い方を分かりやすく解説していきます。

第１回は面倒なHTMLの編集をすることなくWebサイト上のタグを一元管理できる「Googleタグマネージャー」の特徴と基本的な導入方法を解説しています。

タグ設置の効率化や公開前の動作確認（プレビュー）、更新履歴の管理（バージョン）といった導入による4つの主要なメリットを解説します。

さらに、アカウント作成から実際のGoogleアナリティクスタグの設置・公開手順までを初心者向けに分かりやすく紹介する内容となっています。

” Googleタグマネージャーの特徴と導入方法”をテーマに、
今日お伝えしたいことは3つあります。

なお、ここで紹介するツールの使い方や画面は、2021年9月時点のものです。今後、変更となる可能性もありますので、ご了承ください。

Googleタグマネージャーとは、その名の通りGoogleから提供されているタグマネジメントツールです。「タグ」と聞くと値札のようなものをイメージしてしまいがちですが、Webサイトにおける「タグ」とは、htmlファイルの中に記述されている命令式を指します。
何をどこに配置するのか、どんな色・サイズにするのかなど、ページを構成するすべての要素は、この「タグ」の指示によって表現されています。

例としてキノトロープのサイトのTOPページを見てみましょう。たくさんの文字が書かれていますが、WEBページはHTMLとCSSという言語で見た目を作り上げています。その中でこの〈〉で囲まれた文字列の一つ一つが「タグ」です。これだけたくさんのタグが組み合わさって、1つのページが成り立っています。

Webサイトのアクセス解析を行う際も同様に、アクセス解析の対象となるページに、計測を指示する「タグ」を埋め込む必要があります。

しかし、タグを追加したり削除したりする度にhtmlを編集するのは、なかなか手間がかかる作業です。

その面倒なhtmlの編集作業をせずにタグを管理できるツールが、Googleタグマネージャーをはじめとするタグマネジメントツールです。 Googleタグマネージャー以外では、Yahoo!タグマネージャーやAdobe Analyticsなどがあります。

それらと比較した場合、Googleタグマネージャーの特徴は主に2つ挙げられます。
まず、無償で利用できること。そして、Googleが提供しているサービスとの相性が良いことです。

GoogleアナリティクスやGoogle広告などのサービスと簡単に連携できるため、既にGoogleのサービスをご利用の方には特におすすめです。

導入するメリットは、主に4つあります。
l タグの設置が容易になる
l プレビューを使いサイト上で動作チェックができる
l 更新したバージョン単位での管理ができる
l Google提供のツールと相性が良い

まず1つめのメリットは、「タグの設置が容易になる」点です。先ほどもお伝えしたように、Googleタグマネージャーを使えば、htmlの編集をせずにタグを追加・削除できるようになります。htmlの編集作業に割いていた時間を削減でき、コードの貼り忘れといった人的なミスも回避できるため、Webサイト運営の効率化に繋がります。

2つめのメリットは、「プレビューを使いサイト上で動作チェックができる」点です。
Googleタグマネージャーには、ページの公開前にタグの動作確認ができる「プレビューモード」という機能があります。

そのため、タグが正常に動作していない、想定していない箇所でタグが動いてしまっているといった問題を即座に修正でき、公開後のトラブルを防ぐことができます。

3つめのメリットは、「更新したバージョン単位での管理ができる」点です。Googleタグマネージャーでは、「バージョン」と呼ばれる更新履歴の保存・管理が可能です。万が一公開したタグによって二重計測等のトラブルが発生した場合でも、以前のバージョンに戻すことによってトラブルが継続することを回避できます。

4つめのメリットは、「Google提供のツールと相性が良い」点です。Googleタグマネージャーは、Googleが提供している為、GoogleアナリティクスやGoogle広告と相性が良く、ツール間で連携を取るのも容易です。

実際にタグマネージャーを使って、WebページにGAの計測タグを設置してみましょう。まず、Googleタグマネージャーのサイトにアクセスし、「無料で利用する」をクリックします。

Googleのログイン画面が表示されるので、「アカウントの作成」をクリックして個人情報を入力し、アカウントを作ります。既にアカウントをお持ちの方は、作成する必要はありません。そのままログインしてください。

アカウントの設定画面が表示されるため、必要事項を入力していきます。「コンテナ名」には、対象サイトがわかりやすいよう、ドメイン名を設定しておくのがおすすめです。今回はWebサイトにタグを設置する想定のため、ターゲットプラットフォームは「ウェブ」を選択します。

入力できたら「作成」をクリックしましょう。

利用規約に同意すると、「コンテナスニペット」と呼ばれる2種類のコードが表示されます。このコードを対象となるWebサイトのhtmlに埋め込みます。記載されている指示通り、上のコードはページソースの<head>内の上部に、下のコードは<body>の直後に追加してください。

これで事前準備は完了です。早速新しいタグを追加してみましょう。今回はGoogleアナリティクスのタグを設定します。

Googleタグマネージャーのワークスペースから、「新しいタグ」＞「タグの設定」をクリックし、タグタイプから「ユニバーサルアナリティクス」を選択します。

タグの設定画面に遷移したら、GoogleアナリティクスのトラッキングIDを入力します。トラッキングIDは、Googleアナリティクスのプロパティ設定から確認できます。

続いて、「トリガー」をクリックしてタグを埋める範囲を設定します。Googleアナリティクスでは、計測したい全てのページにタグを埋める必要があるため、「All Pages」を選択します。
この際、All Pagesと設定していても実際に配信されるのはGTMタグを記載したページのみになります。その後、画面上部のタグ名の欄に任意の名前を入力し、右上の「保存」をクリックして、タグの設定は完了です。

次に、Googleアナリティクスのタグが正しく動作するかを確認します。画面右上の「プレビュー」をクリックして、タグを埋め込んだページのURLを入力し、「Start」をクリックします。

「Continue」ボタンが現れたらクリックして、設定したGoogleアナリティクスのタグが、「Tags Fired」の欄にあることを確認してください。「Tags Not Fired」の欄にタグが表示されている場合には、トリガーの設定に誤りがある可能性があります。再度トリガーの設定を確認してみてください。