多くの人々にハピネスを提供する!UNIEARTH

オフィシャルブログ
会社HPへ
お問い合わせ

Googleタグマネージャーとは?そのメリットと特徴をご紹介!

google タグマネージャーのイメージ

Webページのタグ

「タグ(tag)」とは、日常生活の場合は、お店の商品(洋服など)に付いている「札」や「ラベル」のようなものを指します。このイメージが元になって、コンピューターの世界でも「タグ」という概念が導入され、いろいろな場面で使われています。

スクリーンショットイメージ
※図1

ソース画面
※図2

Webページの元(ソース)は、HTMLという一種の記述言語で書かれています。例えば、図1のようなYahoo! JAPANのトップページは、図2のようにHTML言語で記述されています。図2のような無機質なHTML言語が、図1のような綺麗なWebページとして表示されているのです。「<」と「>」で囲まれた文字列がHTML言語のタグで、Webページを作り上げる(デザインやコーディング)ために色々なものが用意されています。

スクリプトタグ

Webページをレイアウトするだけであれば、一般的なタグ(種類は多い)で十分です。しかし、現在のWebページで多用されるタグに<script>タグというものがあり、高度なタグの1つです。

<script>タグは、JavaScriptやVBScriptなどのスクリプト(一種のプログラム)をWebページ内に埋め込んだり、外部スクリプト(Webページ外にあるスクリプト)を読み込んだりするためのタグで、Webページに複雑な動作をさせるために用いられます。

図2では、赤枠で囲んだ部分が<script>タグです。
今回説明する「タグマネージャー」で言う「タグ」は、この<script>タグのことを指しています。

Webページ内に含まれるスクリプトタグとしては、次のようなものがあり、商用Webサイトで非常によく利用されています。

  • ページビュー計測タグ
  • コンバージョン計測タグ
  • (コンバージョン:商品購入、会員登録、問い合わせなどを行ったユーザーをトラッキングすること)
  • リンククリック計測タグ
  • Eコマース計測タグ
  • (Eコマース:電子商取引(Electronic Commerce)のこと)
  • リマーケティング広告タグ
  • (リマーケティング:過去にWebサイトにアクセスしたユーザーに提案すること)

タグの複雑化

スクリプトタグは、商用目的に非常に有効なため多用され、それにつれて、Webページに多くのタグを挿入する必要が出てきました。しかし、様々なスクリプトタグを追加して行くうちにWebページのHTMソースLが複雑化し、収拾がつかなくなるという問題が起きてきます。原因としては、

複数のWebエンジニアや外注先にタグの埋め込みを依頼したため、埋め込み流儀がバラバラになった。異なるスクリプト言語によるタグが埋め込まれている。などがあります。

この結果、Webページ内のスクリプトタグの動作仕様を修正・変更しようとした場合やタグの動作エラーなどがある場合、タグの埋め込みを行ったWebエンジニア(社内または外注先の)に依頼せざるを得なくなります。さらに、依頼されたWebエンジニアも動作仕様のすべてを把握できるとは限らず、場当たり的な修正・変更によって、HTMLソースがますます複雑化して行き、タグの運用に支障をきたすようになることも考えられます。

タグマネージャー

tag_img

上記のような問題を解決するために登場したのが「タグマネージャー」です。タグマネージャーという発想は、HTMLソースには1つのスクリプト(JavaScript)タグしか埋め込まず、そのタグを経由して複数のスクリプト(JavaScript)を動作させようというものです。

Googleタグマネージャーの場合、すべてのHTMLソースに共通して次のようなタグを埋め込みます。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');
</script>

これによって、Webページ内のスクリプトタグの動作仕様を修正・変更しようとした場合、HTMLソースには変更を加えずに済みます。スクリプト自体の追加や変更も単純化され、必ずしもWebエンジニアの手を煩わせなくてもスクリプトタグの動作仕様の修正・変更が可能になります。

google tag managerの使用イメージ例
図3

図3は、タグマネージャーの仕組みを簡単に表したものです(Googleタグマネージャーを例として)。

主なタグマネージャーとして、以下のものがあります。

  • Googleタグマネージャー
  • Yahoo!タグマネージャー
  • eco-tag(エコタグ)
  • (ユニタグ)

Googleタグマネージャー

「Googleタグマネージャー」は、Googleによって開発され、2014年3月に正式版がリリースされました。利用するための料金はかかりません(無償提供)。

Googleタグマネージャーの概要や特徴として、次のような点があげられます。

  • Googleタグマネージャーの管理画面からタグの追加や変更ができる。
  • Webエンジニアでなくてもタグを設定できる。つまり、マーケティング担当者が直接タグの運用をできるようになる。
  • アカウント機能で個々のタグに権限(管理者権限、閲覧権限など)を設定できる。
  • Google Analytics(Googleのアクセス解析)やAdWords(アドワーズ)などの設定が簡単にできる。
  • (AdWords:Googleが広告主に対して提供するクリック課金広告サービス)
  • Google以外のサービス(CrazyEggなど)とも連携できる。
  • (CrazyEgg:Webページのビジュアル解析ツール)
  • コンテナ機能によって、管理するサイトを複数登録できる。
  • タグの追加や変更のバージョン(履歴)管理ができる。
  • 作業ログによって、タグを設置したユーザーを確認できる。
  • デバッグモードがあり、タグの動作テストができる。

この記事を書いた人

ユニアース広報部

ユニアース広報部

ユニアース広報部です! ITにまつわる情報をどんどん発信していきたいと思います!

ユニアース広報部の最近の記事

pagetop