「Googleタグマネージャーって何?」
「Googleタグマネージャーのメリットは?」
「初心者だからGoogleタグマネージャーの導入方法がわからない。」
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
こんな悩みを抱えている人はいませんか?
当記事では「Googleタグマネージャーとは何なのか」というところから、「Googleタグマネージャーを使用するメリット」、最後に「Googleタグマネージャーの導入方法」まで説明します。
当記事を読み終えた頃には、あなたはGoogleタグマネージャー初心者を脱することができます。
Googleタグマネージャーとは
Googleタグマネージャーとは、文字通りタグを管理するためのツールです。
多くのサイトでは、タグを使ってマーケティングに必要なデータなどを収集しています。
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
では、「タグ」とは一体なんなのでしょうか。
下の画像を見てください。
![](https://ugokawa.com/wp-content/uploads/2021/08/tag01-812x263.jpg)
英語でいろいろ書いてありますよね。これが、「タグ」です。
この画像のタグは、Googleアナリティクスで分析をするためのタグになります。このタグをWebサイトのHTMLファイルというところに埋め込むことで、Googleアナリティクスが使えるようになるわけです。
もちろん、タグはGoogleアナリティクス以外のツールでもたくさんもあります。それらのツールを使う際も、基本的には各ツールのタグをWebサイトのHTMLファイルに埋め込む必要があります。
しかし、タグを埋め込むのって少し面倒なんですよね。毎回、HTMLファイルを開いて、タグを貼り付けないといけないですし、タグの種類が増えるほどその手間はさらに増えます。
その手間を無くしてくれるのが、Googleタグマネージャーです。
Googleタグマネージャーは、一度だけ管理用のタグを埋め込んでしまえば、あとはGoogleタグマネージャーの管理画面からコードを編集せずに、タグをWebサイトに埋め込むことができます。管理画面を操作するだけなので、初心者の方でもタグを扱いやすくなります。
また、Googleアナリティクスのタグを、Googleタグマネージャーを経由して設置すると、通常より詳細な分析を簡単にすることができるようになります。
ですので、各ツールのタグを埋め込むときは、Googleタグマネージャーを経由して設定することをおすすめします。
Googleタグマネージャーのメリット
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
すでに少しメリットについて触れましたが、ここでメリットをおさらいします。
- タグをいちいちHTMLファイルに埋め込まなくてよくなる
- (WordPressで作ったサイトなら)余計なプラグインを導入しなくて済むので、その分サイトが軽くなる
- タグを一元管理できる
- アナリティクスで詳細な計測をするための設定を簡単にすることができる
- 非同期処理でサイトの表示速度が上がる
- Googleタグマネージャーの導入をしてしまえば、あとはプログラミングコードをいじらず設定ができる
タグをいちいちHTMLファイルに埋め込まなくてよくなる
通常であれば、タグを埋め込むためには、毎回HTMLファイルを開いて、貼り付ける必要があります。
しかし、Googleタグマネージャーを使用すると、1回タグをHTMLファイルに埋め込んでしまえば、あとGoogleタグマネージャーの管理画面からタグを管理することができます。
つまり、HTMLファイルをいちいち編集しなくても、タグマネージャーの管理画面から、タグの設置やタグの削除をすることができるというわけです。
(WordPressで作ったサイトなら)余計なプラグインを導入しなくて済むので、その分サイトが軽くなる
例えば、初心者の方がGoogleアナリティクスのタグを設置するときは、プラグインをインストールして、タグを設置することが多いかと思います。
しかし、使いたいツールが増えるたびにプラグインをインストールしていたら、あっという間にプラグインだらけになってしまいますよね。もちろん、プラグインが増えれば、サイトは重くなりますし、表示速度も落ちます。そうなれば、SEOにも悪い影響をもたらしてしまいます。
Googleタグマネージャーを使用して、余計なプラグインを使わないようにしましょう。
タグを一元管理できる
例えば、通常なら各種計測がしたいと思ったら、Googleアナリティクスなどの管理画面から設定を行い、発行されたタグを埋め込む必要があります。
しかし、Googleタグマネージャーを使用すれば、Googleタグマネージャーの管理画面ですべて完結することができます。正確には、アナリティクスのトラッキングコードなど必要なものは、ツールからコピペしてコピペする必要がありますが。
アナリティクスで詳細な計測をするための設定を簡単にできるようになる
Googleタグマネージャーを経由して、Googleアナリティクスを導入すると、通常より詳細な条件を設定して分析をすることができるようになります。
ほんの一例ですが、アフィリエイトリンクがクリックされた回数を測定したりすることも可能になります。
非同期処理でサイトの表示速度が上がる
非同期処理とは、1つのタスクの実行中でも、別のタスクを実行できる処理です。
つまり、非同期処理によって、タグの読み込みが合理化されているというわけです。
とりあえず、「タグマネージャーを使ってタグを埋め込むと、そうでないときと比較してサイトの表示速度が早くなる」という認識で大丈夫です。
Googleタグマネージャーの導入をしてしまえば、あとはプログラミングコードをいじらず設定ができる
Googleタグマネージャーの導入さえしてしまえば、あとはプログラミングコードをいじらず設定ができます。ですので、初心者の方でもリスク無く扱えます。
また、各ツールの導入や設定変更の際に、エンジニアに外注する必要がなくなるので、経費の削減もできます。
Googleタグマネージャーの設定方法
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
ここからは、Googleタグマネージャーの設定方法を説明します。
Googleタグマネージャーに登録する
Googleタグマネージャー(https://marketingplatform.google.com/intl/ja/about/tag-manager/)にアクセスします。
アクセスをしたら、「無料で利用する」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/08/tag02-382x245.jpg)
Googleアカウントにログインする画面になりますので、ログインします。
![](https://ugokawa.com/wp-content/uploads/2021/08/tag03-382x509.jpg)
下の画像のように、見慣れない画面が表示されることもありますが、そういうときは、「後で行う」をクリックしてスキップします。
![](https://ugokawa.com/wp-content/uploads/2021/08/tag04-382x413.jpg)
下の画像のような画面になったら、「アカウントを作成」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/08/tag05.jpg)
![](https://ugokawa.com/wp-content/uploads/2021/08/tag06-812x887.jpg)
- アカウント名を入力します。ここでは、ブログのタイトルやサイトの名前などをつけておくのがいいです。
- 「日本」を選択します。
- 「コンテナ名」を入力します。ここは、サイトのURLの一部を入力します。全部でも大丈夫です。
- 「ウェブ」を選択します。
- 「作成」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/08/tag08-382x420.jpg)
利用規約が表示されます。ここでは、日本語指定ができませんので、英語のままで大丈夫です。右上の「はい」をクリックします。
タグをサイトに貼り付ける
![](https://ugokawa.com/wp-content/uploads/2021/08/tag09-812x580.jpg)
利用規約に同意すると、上の画像のような画面になります。
このコードをコピーして、サイトに埋め込む必要があります。
誤ってこの画面を閉じてしまった場合は、下の画像の赤枠の場所をクリックすると、再度表示されます。
![](https://ugokawa.com/wp-content/uploads/2021/08/tag10-812x273.jpg)
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
ここからは、タグをサイトに貼り付ける作業を行います。
今回は、初心者の方がWordPressのサイトにタグの埋め込みを行うという前提で説明します。
また、タグを貼り付ける方法は、(1)テーマの機能を利用する方法と、(2)HTMLファイルを編集して貼り付ける方法の2通りがあります。
(1)テーマの機能を利用する方法
テーマによって、タグの貼り付け方が違いますので、使用率が高い「SWELL」と「Snow Monkey」でのやり方を紹介します。
この2つ以外のテーマでも、だいたい似たようなやり方でタグマネージャーのセッティングができます。
まずは、「Snow Monkey」の説明です。
WordPressの管理画面にアクセスし、「外観」→「カスタマイズ」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/snow-monkey-tag01.png)
「SEO」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/snow-monkey-tag02.png)
「Googleタグマネージャー」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/snow-monkey-tag03.png)
Googleタグマネージャーのサイトで取得したID部分だけを貼り付けます。
![](https://ugokawa.com/wp-content/uploads/2021/09/swell-tag05-812x328.png)
「GTM-〇〇」という部分です。ここをコピペして、以下の画像の箇所に貼り付けます。
![](https://ugokawa.com/wp-content/uploads/2021/09/snow-monkey-tag04.png)
また、赤枠の「ログイン中のユーザーにタグを出力しない」にチェックを入れると、自分は分析の対象外になります。チェックを入れておきましょう。
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
「Snow Monkey」はこれでタグの設置が終了です。
次は、「SWELL」でGoogleタグマネージャーを設置するやり方を説明します。
ますは、WordPressの管理画面にアクセスし、「外観」→「カスタマイズ」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/snow-monkey-tag01-1.png)
「高度な設定」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/swell-tag01-382x710.png)
同じ番号のところに、タグマネージャーのコードはコピーして貼り付けます。
![](https://ugokawa.com/wp-content/uploads/2021/09/swell-tag02.png)
![](https://ugokawa.com/wp-content/uploads/2021/09/swell-tag03-1-812x583.png)
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
これでSWELLでのタグの設置は間完了です。
HTMLファイルに直接貼り付ける方法
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
それでは、説明に入ります。
ファイルジラなどのFTPソフトを使って編集するか、ご使用のレンタルサーバーから設定を行います。
ここでは、Xserverでのやり方を説明します。
まずは、Xserverのファイルマネージャーにアクセスします。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag01-812x375.png)
ご自身のサイトのURL部分をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag02-382x1121.png)
「public_html」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag03-382x458.png)
「wp-content」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag04-382x242.png)
「themes」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag05-382x501.png)
ここでは、ご自身がWordPressで使用されている親テーマを選択します。_chiliの方は子テーマです。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag06-382x318.png)
親テーマを開いたら、その中にある「header.php」を選択肢、「ダウンロード」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag14-812x122.png)
ダウンロードが終了したら、今度は子テーマを開きます。「diver_child」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag15-382x221.png)
今度は、ダウンロードではなく、「アップロード」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag16-812x86.png)
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag17-812x744.png)
- さきほどダウンロードした「header.php」 をアップロードします。
- 「UTF-8」を選択し、「アップロード」をクリックします。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag08-382x656.png)
子テーマに「header.php」 をダウンロードしたら、そのまま子テーマを編集をします。
- 「header.php」をクリックします。
- 「編集」をクリックします。
下の画像のように、編集画面が表示されます。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag09-812x875.png)
少しスクロールして、</head>という箇所を探します。
見つからないときは、MACなら「command+F」を押すと、ページ内検索ができますので「</head>」と入力します。Windowsなら「Ctrl+F」です。
</head>を見つけたら、その上に、タグマネージャーで取得したコード(下の画像)を貼り付けます。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag11-812x572.png)
今度は、<body>を探します。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag12-812x869.png)
見つけたらエンタキーで段落空けて、Googleタグマネージャーのコードを貼り付けます。貼り付けるコードは以下の通りです。
![](https://ugokawa.com/wp-content/uploads/2021/09/xserver-tag13-812x572.png)
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
これでタグマネージャーの貼り付け作業が終了しました。コードを編集したら、かならず更新ボタンをクリックしましょう。
Googleタグマネージャーのタグは、「 <head> 内のなるべく上のほうに貼り付けてください。」と指示がありますので、なるべく上の方に貼り付けます。
理由は、なるべく早く読み込んでほしいからです。
しかし、今回は</head>の直前に貼り付けます。赤枠で囲まれているところです。貼り付けるスペースが無い場合は、エンターキーでスペースを開けてください。
![](https://ugokawa.com/wp-content/uploads/2021/08/niyan.jpg)
「 <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アナリティクスを導入してみてはいかがでしょうか。
コメント