みなさんは、計測ツールをサイトに設定されていますでしょうか?

例えば、Google Analyticsの場合、Google Analyticsから発行されるタグを計測したいサイトのすべてのページのHTMLに設定する必要があります。

また、Google広告を配信することになれば、Google広告から発行されるタグを全ページやコンバージョンページのHTMLに設定する必要があります。

計測ツールを導入するたびに、サイト内のすべてのHTMLにタグの設定をするのは大変ですよね・・・。
それを解決してくれるのが、「タグマネージャー」なのです。

2020年12月の調査では、上場企業のWebサイト3,636社のうち、タグマネージャーを導入している割合は44.24%となっています。
そのうち、Googleから提供されているタグマネージメントシステム「Googleタグマネージャー(GTM)」を導入している割合は、99.28%ということです。
タグマネージャ(GTM/YTM)の利用状況 2020年12月

Googleタグマネージャーは、Googleのアカウントさえあれば誰でも手軽に導入することができるため、導入の割合が高くなっているのではないかと思います。

そこで今回は、導入されている割合の高い「Googleタグマネージャー(GTM)」についてご紹介していきます。

タグマネージャーとは

タグマネージャーとは、様々な計測ツールのタグを一括で管理することができるタグマネージメントシステムです。
略して「タグマネ」と呼ぶこともあります。

サイトのHTMLにタグマネのタグを1つ設置することで、計測ツールや広告ツールのタグを一括で管理することが可能です。

タグの管理が容易になるだけでなく、HTML内のタグを減らすことでWEBサイトの読み込み速度を速くすることができSEO対策にも有利に働きます。

タグマネージメントシステムの種類

タグマネージメントシステムにはいくつかの種類がありますが、今回は、代表的な3つのタグマネージメントシステムをご紹介いたします。

Googleタグマネージャー(Google Tag Manager)

利用されている方も多いのではないでしょうか?

「Googleタグマネージャー」は、Googleから提供されているタグマネージメントシステムです。「Google Tag Manager」を略して、GTMとも呼ばれています。

Googleのツールである「Google Analytics」や「Google広告」のタグだけではなく、様々なツールのタグを設定することができます。

無料のGoogleアカウントがあれば、誰でも無料でGoogleタグマネージャーを利用することができます。

Googleタグマネージャー

Yahoo!タグマネージャー(Yahoo! Tag Manager)

「Yahoo!タグマネージャー」は、Yahoo!から提供されているタグマネージメントシステムです。「Yahoo! Tag Manager」を略して、YTMとも呼ばれています。

米国Signal社の「Signal Tag」の技術を活用したタグマネージメントシステムで、Yahoo!広告のアカウントをお持ちの方であれば、誰でも無料で利用することができます。

Yahoo!タグマネージャー

Adobe Experience Platform Launch

「Adobe Experience Platform Launch」は、アドビ社から提供されているタグマネージメントシステムです。

Adobe Experience Cloudのアカウントをお持ちの方であれば、誰でも無料で利用することができます。

Adobe Experience Platform Launch

Googleタグマネージャー(GTM)とは

今回は、最も利用者が多い「Googleタグマネージャー」についてご紹介していきます。

Googleタグマネージャーは、「アカウント」と「コンテナ」という2つの層で構成されています。

基本的に、1つの会社に対して1アカウントを作成します。
アカウント内にコンテナを作成しますが、1ドメインに対して1コンテナを作成します。

Googleタグマネージャー管理画面

コンテナ内に入ると、ワークススペースというタグの設定を行う画面があります。
ワークスペースは、上限3個まで作成することが可能です。

Googleタグマネージャー:ワークスペース

Googleタグマネージャー(GTM)導入のメリット

ここからは、Googleタグマネージャーを利用するメリットをご紹介していきます。

WEBサイトの表示が速くなる

複数の計測ツールや広告ツールを利用する際、ツールの数だけは最低タグを設置する必要があります。
しかし、Googleタグマネージャーを導入することで、設置する必要のあるタグは1つとなります。

HTML内に設置するタグの数が1つとなることで、ページのソースがシンプルになり読み込み速度が速くなることでWEBサイトの表示速度が速くなります。

利用が無料

Googleタグマネージャーは、無料のGoogleアカウントさえあれば誰でも無料で利用することができます。

Yahoo!タグマネージャーは、広告アカウント1つあたり1アカウントを付与されるので、広告アカウントがない方は利用することができません。
また、Adobe Experience Platform LaunchもAdobe Experience Cloudのアカウントがなければ使用することができません。

バージョン管理が可能

バージョン管理とは、いつどのような変更が行われたかの記録です。
最新に公開したバージョンで不具合が生じた際、不具合が起きる前の状態のバージョンにすぐに戻すことができます。

Googleタグマネージャー:バージョン画面

タグの設置・管理が簡単になる

タグマネージャーを使用しない場合、計測したいすべてのページのHTMLにタグを設定する必要があります。
そのため、WEBサイトの作成を外注で行っている際は、ツールの導入のたびにWEBサイトの制作会社にタグの設定を依頼する必要があります。

しかし、Googleタグマネージャーを導入していると、制作会社などに依頼することなく社内で簡単にWEBサイトにタグの設定を行うことが可能です。

公開前にタグの稼働確認が可能

Googleタグマネージャーには、「プレビュー」という機能があります。
プレビューを行うことで、設定したタグが実際にサイト上で稼働しているかを確認することができます。

広告のタグを設定した際、実際の広告をクリックすることなくタグがきちんと動いているかの確認をすることができます。

Googleタグマネージャー(GTM)の導入方法

ここからは、Googleタグマネージャーの導入方法をご紹介いたします。

Googleタグマネージャー(GTM)にログイン

Googleタグマネージャーのページから、「タグマネージャーにログイン」をクリックしてください。

アカウントとコンテナの設定

Googleタグマネージャーにログインすると、下記のページに遷移しますので「アカウントを作成」をクリックしてください。

アカウントとコンテナの設定画面に必要項目の入力を行います。
アカウント名やコンテナ名は、ご自身や他の方にもわかりやすい名前をつけることをおすすめします。


コンテナのターゲットプラットフォームは、計測を行いたいプラットフォームを選択してください。

アカウント情報入力後、作成ボタンをクリックすると利用規約が表示されますので、利用規約に同意後「はい」で次に進みます。

Googleタグマネージャーのタグが発行されますので、WEBサイトの指定の位置に設置を行ってください。
赤四角の箇所をクリックすると、タグをコピーすることができます。

これで、Googleタグマネージャーの導入&設定は完了です。

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

次は、Googleタグマネージャーに様々なタグの設置を行っていきます。
今回は、Google Analyticsの設定方法についてご紹介していきます。

Google Analyticsのタグの設定

左の「タグ」のページへ遷移し、「新規」をクリックしタグの設定を行っていきます。

設定するタグの名前ですが、ご自身や他の方にもわかりやすいように「Google Analyticsタグ」と設定しておくことをおすすめします。

「タグの設定」の箇所をクリックして、タグの設定を行っていきます。

Googleのツールはタグのテンプレートがあります。
今回は、Google Analyticsのタグの設定を行いますので、「Google Analytics:ユニバーサルアナリティクス」をクリックしてください。

Google Analytics設定を「新しい変数」に変更します。

トラッキングIDの入力をしてください。

Google以外のツールのタグ設定

Google以外のツールのタグの設定を行う場合、コミュニティテンプレートギャラリーで1度探してみてください。
赤枠の箇所をクリックしてください。

様々なツールのタグのテンプレートが表示されますので、虫眼鏡アイコンをクリックして探します。

Yahoo!広告のタグを探したい時は、「Yahoo」と入れて検索してください。
Yahoo!広告のタグテンプレートが表示されます。

今回は、「Yahoo!広告(検索広告)-サイトリターゲティング」のタグテンプレートを追加しますので、「Yahoo!広告(検索広告)-サイトリターゲティング」の項目をクリックしてください。

テンプレートが表示されますので、「ワークスペースに追加」をクリックし追加します。

確認画面が表示されますので、「追加」をクリックして追加を行ってください。

タグの設定画面がでてきますので、こちらで設定をしてください。

その他のタグ設定

コミュニティテンプレートギャラリーでもタグのテンプレートが見つからない場合は、「カスタムHTML」をクリックし作成してください。

「HTML」の箇所にタグを入力することで設定が可能です。
「document.writeをサポートする」の項目にはチェックをいれておいてください。
「document.writeをサポートする」にチェックが入っていない場合、正常に動作しないことがあります。

トリガーの設定

タグの設定が完了しましたら、次は「トリガー」の箇所をクリックし設定を行っていきます。

トリガーとは、紐付いているタグをどのタイミングで反応をさせるのかの設定となります。

右上の「+」マークをクリックします。

「+」マークをクリックすると、トリガーの設定画面が表示されます。
ページ内の「トリガーの設定」をクリックしてください。

今回は、Google Analyticsのタグを設定しますので「ページビュー」を選択します。

ご自身がわかりやすいトリガー名をつけ、計測をしたいページの設定を行います。

今回は、弊社のWEBサイト全体のページの計測を行うため、トリガーの発生場所を「一部のページビュー」に設定。
イベントが発生するトリガーを「Page URL 含む azkk.co.jp」に設定します。

トリガーの設定が完了しましたら保存をしてください。

タグとトリガーの登録が完了しましたら「保存」をクリックしてください。

「プレビュー」機能でのタグの動作確認

Googleタグマネージャー管理画面の「プレビュー」ボタンをクリックしてください。

新規ページが開きますので、タグの確認を行いページのURLを入力し、「Connect」をクリックします。

「Connected!」と表示されましたら、「Continue」をクリックします。

さきほど入れたURLで、タグが稼働しているかの確認を行うことができます。

タグの公開

プレビューでタグが正常に稼働していることが確認できましたら、右上の「公開」をクリックします。

今から公開する「バージョン名」と「バージョンの説明」を入力し、右上の「公開」ボタンをクリックしてください。
「バージョン名」と「バージョンの説明」は入力しなくても保存はできますが、後から何の変更を加えたのかわかりやすい名前と説明にしておくことをおすすめします。

バージョンのページに遷移し、バージョン名と変更内容が表示されます。
左上の赤枠「ワークスペース」をクリックします。

ワークスペースのページの右上赤枠部分の「ワークスペースでの変更数」が0になっていましたら、設定した綱目がすべて公開されています。

これで、Googleタグマネージャーの設定がすべて完了となります。

まとめ

Googleタグマネージャーのメリットと設定方法をご紹介いたしました。

Googleタグマネージャーの導入は、工数の削減だけではなくSEOにとっても効果がありますので、まだ導入されていないという方はぜひこちらの記事を参考に導入してみてください。

WEBサイトの計測データを活用して、みなさんのビジネスを加速させていきましょう。