Googleタグマネージャーを導入する方法

当記事では「Googleタグマネージャーとは何なのか」というところから、「Googleタグマネージャーを使用するメリット」、最後に「Googleタグマネージャーの導入方法」まで説明します。

当記事を読み終えた頃には、あなたはGoogleタグマネージャー初心者を脱することができます。

Googleタグマネージャーとは

Googleタグマネージャーとは、文字通りタグを管理するためのツールです。

多くのサイトでは、タグを使ってマーケティングに必要なデータなどを収集しています。

下の画像を見てください。

英語でいろいろ書いてありますよね。これが、「タグ」です。

この画像のタグは、Googleアナリティクスで分析をするためのタグになります。このタグをWebサイトのHTMLファイルというところに埋め込むことで、Googleアナリティクスが使えるようになるわけです。

もちろん、タグはGoogleアナリティクス以外のツールでもたくさんもあります。それらのツールを使う際も、基本的には各ツールのタグをWebサイトのHTMLファイルに埋め込む必要があります。

しかし、タグを埋め込むのって少し面倒なんですよね。毎回、HTMLファイルを開いて、タグを貼り付けないといけないですし、タグの種類が増えるほどその手間はさらに増えます。

その手間を無くしてくれるのが、Googleタグマネージャーです。

Googleタグマネージャーは、一度だけ管理用のタグを埋め込んでしまえば、あとはGoogleタグマネージャーの管理画面からコードを編集せずに、タグをWebサイトに埋め込むことができます。管理画面を操作するだけなので、初心者の方でもタグを扱いやすくなります。

また、Googleアナリティクスのタグを、Googleタグマネージャーを経由して設置すると、通常より詳細な分析を簡単にすることができるようになります。

ですので、各ツールのタグを埋め込むときは、Googleタグマネージャーを経由して設定することをおすすめします。

Googleタグマネージャーのメリット

タグをいちいちHTMLファイルに埋め込まなくてよくなる

通常であれば、タグを埋め込むためには、毎回HTMLファイルを開いて、貼り付ける必要があります。

しかし、Googleタグマネージャーを使用すると、1回タグをHTMLファイルに埋め込んでしまえば、あとGoogleタグマネージャーの管理画面からタグを管理することができます。

つまり、HTMLファイルをいちいち編集しなくても、タグマネージャーの管理画面から、タグの設置やタグの削除をすることができるというわけです。

（WordPressで作ったサイトなら）余計なプラグインを導入しなくて済むので、その分サイトが軽くなる

例えば、初心者の方がGoogleアナリティクスのタグを設置するときは、プラグインをインストールして、タグを設置することが多いかと思います。

しかし、使いたいツールが増えるたびにプラグインをインストールしていたら、あっという間にプラグインだらけになってしまいますよね。もちろん、プラグインが増えれば、サイトは重くなりますし、表示速度も落ちます。そうなれば、SEOにも悪い影響をもたらしてしまいます。

Googleタグマネージャーを使用して、余計なプラグインを使わないようにしましょう。

タグを一元管理できる

例えば、通常なら各種計測がしたいと思ったら、Googleアナリティクスなどの管理画面から設定を行い、発行されたタグを埋め込む必要があります。

しかし、Googleタグマネージャーを使用すれば、Googleタグマネージャーの管理画面ですべて完結することができます。正確には、アナリティクスのトラッキングコードなど必要なものは、ツールからコピペしてコピペする必要がありますが。

アナリティクスで詳細な計測をするための設定を簡単にできるようになる

Googleタグマネージャーを経由して、Googleアナリティクスを導入すると、通常より詳細な条件を設定して分析をすることができるようになります。

ほんの一例ですが、アフィリエイトリンクがクリックされた回数を測定したりすることも可能になります。

非同期処理でサイトの表示速度が上がる

非同期処理とは、1つのタスクの実行中でも、別のタスクを実行できる処理です。

つまり、非同期処理によって、タグの読み込みが合理化されているというわけです。

とりあえず、「タグマネージャーを使ってタグを埋め込むと、そうでないときと比較してサイトの表示速度が早くなる」という認識で大丈夫です。

Googleタグマネージャーの導入をしてしまえば、あとはプログラミングコードをいじらず設定ができる

Googleタグマネージャーの導入さえしてしまえば、あとはプログラミングコードをいじらず設定ができます。ですので、初心者の方でもリスク無く扱えます。

また、各ツールの導入や設定変更の際に、エンジニアに外注する必要がなくなるので、経費の削減もできます。

Googleタグマネージャーの設定方法

Googleタグマネージャーに登録する

Googleタグマネージャー（https://marketingplatform.google.com/intl/ja/about/tag-manager/）にアクセスします。

アクセスをしたら、「無料で利用する」をクリックします。

---

Googleアカウントにログインする画面になりますので、ログインします。

---

下の画像のように、見慣れない画面が表示されることもありますが、そういうときは、「後で行う」をクリックしてスキップします。

---

下の画像のような画面になったら、「アカウントを作成」をクリックします。

---

1. アカウント名を入力します。ここでは、ブログのタイトルやサイトの名前などをつけておくのがいいです。
2. 「日本」を選択します。
3. 「コンテナ名」を入力します。ここは、サイトのURLの一部を入力します。全部でも大丈夫です。
4. 「ウェブ」を選択します。
5. 「作成」をクリックします。

---

利用規約が表示されます。ここでは、日本語指定ができませんので、英語のままで大丈夫です。右上の「はい」をクリックします。

---

タグをサイトに貼り付ける

利用規約に同意すると、上の画像のような画面になります。

このコードをコピーして、サイトに埋め込む必要があります。

誤ってこの画面を閉じてしまった場合は、下の画像の赤枠の場所をクリックすると、再度表示されます。

---

今回は、初心者の方がWordPressのサイトにタグの埋め込みを行うという前提で説明します。

また、タグを貼り付ける方法は、(1)テーマの機能を利用する方法と、(2)HTMLファイルを編集して貼り付ける方法の2通りがあります。

(1)テーマの機能を利用する方法

テーマによって、タグの貼り付け方が違いますので、使用率が高い「SWELL」と「Snow Monkey」でのやり方を紹介します。

この2つ以外のテーマでも、だいたい似たようなやり方でタグマネージャーのセッティングができます。

---

まずは、「Snow Monkey」の説明です。

WordPressの管理画面にアクセスし、「外観」→「カスタマイズ」をクリックします。

---

「SEO」をクリックします。

---

「Googleタグマネージャー」をクリックします。

---

Googleタグマネージャーのサイトで取得したID部分だけを貼り付けます。

「GTM-〇〇」という部分です。ここをコピペして、以下の画像の箇所に貼り付けます。

また、赤枠の「ログイン中のユーザーにタグを出力しない」にチェックを入れると、自分は分析の対象外になります。チェックを入れておきましょう。

---

次は、「SWELL」でGoogleタグマネージャーを設置するやり方を説明します。

ますは、WordPressの管理画面にアクセスし、「外観」→「カスタマイズ」をクリックします。

---

「高度な設定」をクリックします。

---

同じ番号のところに、タグマネージャーのコードはコピーして貼り付けます。

HTMLファイルに直接貼り付ける方法

初心者の方にもわかりやすく説明しますが、こちらの方法はミスをしてしまうと最悪サイトが表示されなくなってしまうこともあります。自信が無い方は、どなたか詳しい人にお願いしてください。もし、身近にそういう人がいないという場合は、有料になりますが、私が設定を代行しますのでココナラにお問い合わせください。

ファイルジラなどのFTPソフトを使って編集するか、ご使用のレンタルサーバーから設定を行います。

ここでは、Xserverでのやり方を説明します。

まずは、Xserverのファイルマネージャーにアクセスします。

---

ご自身のサイトのURL部分をクリックします。

---

「public_html」をクリックします。

---

「wp-content」をクリックします。

---

「themes」をクリックします。

---

ここでは、ご自身がWordPressで使用されている親テーマを選択します。_chiliの方は子テーマです。

---

親テーマを開いたら、その中にある「header.php」を選択肢、「ダウンロード」をクリックします。

---

ダウンロードが終了したら、今度は子テーマを開きます。「diver_child」をクリックします。

---

今度は、ダウンロードではなく、「アップロード」をクリックします。

---

1. さきほどダウンロードした「header.php」 をアップロードします。
2. 「UTF-8」を選択し、「アップロード」をクリックします。

---

子テーマに「header.php」 をダウンロードしたら、そのまま子テーマを編集をします。

1. 「header.php」をクリックします。
2. 「編集」をクリックします。

【わざわざ子テーマにheader.phpをコピーした理由】
親テーマにGoogleタグマネージャーのコードを貼り付けたとしても正確に動作します。しかし、親テーマは開発者がコードを更新してバージョンアップします。そして、親テーマのバージョンアップをすると、元のコードは上書きされてしまいます。ということは、親テーマにGoogleタグマネージャーのコードを貼り付けたとしても親テーマが更新されるたびに上書きされてしまい、貼り付けたコードがなくなってしまいます。そこで、子テーマの登場です。子テーマは、親テーマを上書きすることができます。ですので、子テーマにコードを記述しておけば、親テーマが更新されたとしても、上書きされずに済みます。しかし、子テーマにもデメリットがあります。それは、親テーマを上書きしてしまうことです。たとえば、親テーマでheader.phpが更新されたとしても、子テーマのheader.phpが優先されてしまいます。つまり、親テーマで重要な更新がされたときに、反映されなくなってしまいます。ですので、本来ならテーマの機能を利用して、タグを貼り付けるのが1番いいというわけです。

---

下の画像のように、編集画面が表示されます。

少しスクロールして、</head>という箇所を探します。

見つからないときは、MACなら「command+F」を押すと、ページ内検索ができますので「</head>」と入力します。Windowsなら「Ctrl+F」です。

</head>を見つけたら、その上に、タグマネージャーで取得したコード(下の画像)を貼り付けます。

---

今度は、<body>を探します。

見つけたらエンタキーで段落空けて、Googleタグマネージャーのコードを貼り付けます。貼り付けるコードは以下の通りです。

Googleタグマネージャーのタグは、「 <head> 内のなるべく上のほうに貼り付けてください。」と指示がありますので、なるべく上の方に貼り付けます。

理由は、なるべく早く読み込んでほしいからです。

しかし、今回は</head>の直前に貼り付けます。赤枠で囲まれているところです。貼り付けるスペースが無い場合は、エンターキーでスペースを開けてください。

その理由ですが、「タグマネージャーツール設置方法まとめ」 の記事を参考にしています。

少しだけ引用すると、以下の通りです。

head内直下、なるべく上に設置（但し、dataLayerなどGTM内で使う可能性のあるJavaScript変数の宣言箇所より下）
「head内直下でなるべく上」が公式に推奨されている設置位置ではあるものの、GTMの公式サイト等のソースを見るかぎり、以下の記述より下に置くことをお勧め。

・metaタグ

・外部CSSファイル読み込み

・GTM内で使う可能性のあるJavaScript変数宣言(dataLayerなど)

・ページ内容を変更するJavaScriptコード

・リダイレクトを行うJavaScriptコード

https://qiita.com/aqril_1132/items/d674fa0b576c6a44895f

ですので、この条件を満たそうとすると、</head>の直後にGoogleタグマネージャーのタグを貼り付けることになります。

まとめ

今回は、Googleタグマネージャーのタグをサイトに埋め込みました。

しかし、埋め込んだだけでは何もできません。

まずはGoogleタグマネージャーを使用して、Googleアナリティクスを導入してみてはいかがでしょうか。