ブログ

ウェブサイトに必須!?導入しておきたいタグマネージャーの基本

ウェブサイトを立ち上げたら、Googleアナリティクスを設定して、アクセス解析を行なっている方も多いと思います。これは、Googleアナリティクスのアカウントを開設してプロパティの『トラッキングコード』を各ページのHTMLに記述すれば実現できます。

しかし、多くの場合、この方法はあまりオススメできません(※1)。今はアクセス解析しか行なっていないとしても、ウェブサイトの成長に伴って、将来的にさまざまな施策が必要になった時に何らかの用途でタグを追加したり削除したりする可能性があるからです。

(※1)ecショップシステムなど、プラットフォームによってはタグマネージャーを正式にサポートしていないケースもあります。

タグの数が増えていくにつれ、HTMLに直接埋め込む作業負荷は膨大なものになります。ページ数が多くWordpressのようなCMSを使っていない場合は、さらに大変な作業になってしまいます。

その問題を解決するのがタグマネージャーと呼ばれるもので、Googleタグマネージャー(GTM)以外にもYahoo!タグマネージャー(YTM)やAdobeタグマネージャー(DTM)などさまざまな製品があります。本記事では、Googleタグマネージャーに絞って、導入のメリットから基本的な設定方法までをご説明します。

   

Googleタグマネージャーを導入するメリット

タグマネージャーと呼ばれるツールは『タグの管理』を行うためのツールです。ウェブサイト上に設置するタグを、直接HTMLファイルを編集することなくダイナミックに一元管理することができます。

Googleアナリティクスのタグは馴染み深い方が多いと思いますが、タグを埋め込むことによって、他にもさまざまなことができるようになります。

  • ウェブサイトを訪問したことがあるユーザーに絞って広告を出す
  • お問い合わせや商品購入などのコンバージョンを計測する
  • ヒートマップツールなど外部ツールを導入する

例えば、広告を出稿する予定がないとしても、ウェブサイトに訪れたユーザーのリストを蓄積しておくことで、将来的にリマーケティング(リターゲティング)に使うことができるようになります。

導入するための準備

Googleタグマネージャーを利用するためには、以下のリンクからアカウントを作成します。

Googleタグマネージャー
https://tagmanager.google.com/

※既存のアカウントにコンテナを作成する場合は、タグマネージャーの『管理』タブから『コンテナ』横にある『+』ボタンを押して追加します。

次にウェブサイトの全ページに埋め込むコードを確認するために『管理』タブから『Googleタグマネージャーをインストール』を選択します。なお、コンテナを作成した時にも同じコードが表示されます。

以下のコードが表示されますので、head要素、body要素それぞれに貼り付けます。コンテナIDが埋め込まれているため、このコードをほかのサイトで使い回すことはできません。

Googleタグマネージャーの基本

ここでは、ごく基本的なタグマネージャーの使い方としてGoogleアナリティクスの計測方法についてご説明します。

タグマネージャー上部には、以下3つのタブがあります。

ワークスペース タグやトリガー、変数の編集を行う。
バージョン 公開するバージョンを管理する。
管理 アカウントやコンテナの管理を行う。

まず始めに、『ワークスペース』タブからGoogleアナリティクスのタグを設置します。
画面左の『サマリー』タブを選択後『新しいタグ』リンクをクリックします。
※画面左の『タグ』メニューから『新規』ボタンを選択することもできます。

タグを編集する画面が表示されます。

ここで、タグのアイコン部分をクリックすると、『タグタイプの選択』が表示されます。
タグタイプにはよく使われるものがあらかじめ用意されていますので、そこから選択するか、もしくは『カスタムHTML』を選択して手動で設定することもできます。

今回は、Googleアナリティクスの設定ですので、一番上にある『Google アナリティクス: ユニバーサル アナリティクス』を選択します。

次に、『設定変数を選択』から『新しい変数』をクリックすると、以下の画面が表示されます。

この画面で、『トラッキングID』のところに、GoogleアナリティクスのトラッキングIDを入力して、変数に名前をつけて保存します。
この項目は、後から画面左の『変数』タブから編集することができます。

次に、『トリガー』を設定します。『トリガー』は、そのタグがどのタイミングで発火するかを設定するもので、『ページが表示された時』『特定のページが表示された時』『リンクがクリックされた時』などのイベントを設定することもできます。

ここでは、全てのページを対象としてタグを発火させたいので、予め用意されている『All Pages – ページビュー』を選択します。

『+』ボタンをクリックして、トリガーを作成することでさまざまな計測ができるようになります。

これでGoogleアナリティクスの設定は完了です。
標準でサポートされているタグの場合は、このような手順で簡単に設定することができます。タグマネージャーはさまざまな機能があり、使いこなすためには複雑な知識が必要となりますが、まずはここまで押さえておきたいところです。

タグの公開

設定したタグを公開する時はいきなり『公開』ボタンを押すのではなく、必ず『プレビュー』を行って、タグの発火を確認しておきます。

『プレビュー』ボタンをクリックすると、プレビューモードになり、同じブラウザでサイトを開いた時にタグの発火を確認できるようになります。

この状態で、新しいタブをオープンしてサイトを開くと、画面下部にタグマネージャーのプレビューが表示されます。

『Tags Fired On This Page』に設定したタグが表示されていることを確認してください。独自でトリガーを作成して、特定のページや特定のイベントなどを設定しているタグは該当のページ以外では『Tags Not Fired On This Page』に表示されます。

この時点ではまだタグは有効にはなっていません。タグが発火することを確認したら、プレビューモードを終了して、『公開』ボタンを押します。

『バージョン名』や『バージョンの詳細』は必須項目ではありませんが、タグマネージャーは前のバージョンに戻したり、複数人で編集することもできますので、前のバージョンから『何を変更したのか』を履歴として管理することをお勧めします。変更点がわかると、バージョンを戻すことも容易になります。

最後に

今回は、タグマネージャーの紹介と基本的な使い方について説明しました。
もしGoogleアナリティクスしか使っていないとしても、ぜひタグマネージャーの導入を検討していただきたいと思います。前述の通り、タグマネージャーはさまざまな使い方ができます。例えば、Google広告やFacebook、LINEなどのSNS、サードパーティーのツールなど、タグを埋め込んでウェブサイトの効果測定や広告に活用することも増えています。その度にHTMLを全ページ編集することは現実的ではありません。

ウェブサイトを効率的に運用する、または、マーケティングに活用するためにお勧めしたいツールです。

更新日: