実践Googleタグマネージャ入門

実践 Googleタグマネージャ入門
タグマネージャ導入前に知っておくべき基礎知識(全20回の2)

Googleタグマネージャは、どんなタグを管理できて、どんなタグは管理できないのでしょうか
書籍の1-2/1-3<導入の準備>より(このコーナーでは、電子書籍『実践 Googleタグマネージャ入門』の内容の一部を、Web担の読者向けに特別にお届けしています)

基本的にはどんなタグでも対応

さて、Googleタグマネージャは「タグを管理するツール」ですが、取り扱い可能なタグはどうなっているのか気になりますよね? 実際に導入してみたものの「管理しようと思っていたタグが非対応だった」では目も当てられません。しかし、安心してください。Googleタグマネージャは、ごく一部を除いてほとんどのタグに対応しています。逆に非対応なタグの方が少ないため、ここでは非対応のタグの例を挙げていきます。以下に該当するタグを利用している場合だけ、注意してください。

●Googleタグマネージャが対応していないタグ

  • ページ構造にかかわるタグ(SNSのシェアボタンを生成するJavaScriptなど)
  • 同期処理が必要なタグ(Googleアナリティクスのウェブテスト機能など)

この2種類が、2014年11月現在「非対応」となっているタグです。将来的には対応するかもしれませんが、現状ではこれらのタグをGoogleタグマネージャで管理することはできません。ここからは少し技術的な話になりますが、それぞれなぜ対応していないのか、順に解説します。

「同期タグ」と「非同期タグ」

JavaScriptを含むタグは、大きく「同期タグ」と「非同期タグ」の2つに分かれます。これらはJavaScriptの処理のタイミングについての分け方で、「同期タグ」はページの読み込みと同期していて、逆に「非同期タグ」はページの読み込みとは独立して処理されます。

これがどういうことかというと、同期タグではJavaScriptが読み込まれたら処理が開始され、その処理が完了するまでページの読み込みは止まります。そのため、同期タグでは「JavaScriptが読み込まれたタイミングで確実に処理を開始」することができますが、その半面、ページの表示が遅くなってしまうなどの影響が出ます。

逆に、非同期タグの場合はJavaScriptが読み込まれてもそのタイミングでは必ずしも処理を開始しない代わりに、同期タグのようにページの読み込みを止めてしまうことがありません。「処理のタイミングが安定しない」というデメリットはありますが、ページの表示に悪影響を与えてユーザーにストレスを感じさせることがないため、Googleタグマネージャではすべてのタグが強制的に非同期タグとして扱われる仕様になっています。

●同期タグと非同期タグの違い

v20102a
同期タグは処理されるタイミングが決まっている一方、エラーが起こるとページの読み込みが止まってしまうおそれがある。非同期タグはその心配はないが、タグが処理されるタイミングが安定しない。Googleタグマネージャではすべてのタグが「非同期タグ」として扱われる。

SNSへの投稿ボタンやウェブテスト機能は配信できない

1つ目の「ページ構造にかかわるタグ」は、非同期タグとして処理されると、例えばページ内の特定箇所のHTMLを変更するタグを利用しようとした場合、その変更しようとしている要素がまだ読み込み完了していない可能性が出てきます。例えば、「『hogehoge』といういうidが記述されているdivタグの中のテキストを変更する」といったタグの場合です。そのため、「ページ構造にかかわるタグ」は非対応とされているわけです。よく使われるものでは、TwitterやFacebookなどSNSへの投稿ボタンを生成するJavaScriptなども含まれます。

2つ目の「同期処理が必要なタグ」も、強制的に非同期タグとして扱われてしまうため非対応とされています。例えばGoogleアナリティクスのウェブテスト(A/Bテスト)機能がこれに当たります。ウェブテストのタグは、ページが表示される前にJavaScriptの処理が完了していないと、ユーザーに画面がちらついて見えるといった違和感を覚えさせる要因となります。

実際には、ページの読み込みが確実に終わったタイミングでタグを配信するなどひと工夫すれば対応は可能ですが、それにはJavaScriptの知識が必要になります。同期タグも普通に配信自体はできるのですが、どうしても処理の開始にタイムラグが発生してしまうため、非同期タグとして処理しても問題がないかを判断する必要があります。必ず同期タグとして処理しなければならないタグの場合は、素直にHTMLにタグを直接記述しましょう。

これらのJavaScriptを読み込むタイミングが重要なタグ以外は、基本的にはどんなタグにも対応しています。タグもGoogleタグマネージャもJavaScriptで動作している以上、JavaScript同士の相性などで正しく動作しない可能性が絶対にゼロだと保証はできませんが、筆者が利用している限りそうした場面に出くわしたことは一度もないため、高い確率で大丈夫といえます。「99%大丈夫だが、相性の問題がある可能性もある」ということを頭の片隅に入れておくと、万一問題が発生したときに解決の手がかりになるかもしれません。

●SNSの投稿ボタンは使えない

v20102b
見覚えのある人も多いであろうSNSへの投稿ボタン。これはページの特定箇所のHTMLを書き換えるタグのため、Googleタグマネージャでは扱えない。
「同期タグ」と「非同期タグ」は誤差程度の違いしかない

「非同期タグは処理のタイミングが安定しない」とはいっても、ほとんどのタグはすぐに処理が終わるため、実際には誤差程度の違いしかありません。多くの場合は同期タグでも非同期タグでもどちらでも正常に動作します。しかし、本文中で例に上げたウェブテストのタグなど、処理タイミングを厳密に固定したいタグの場合は同期タグとして、つまり本来の使用方法通りにWebページのHTMLに直接記述するのがベストになります。

導入のコストはどれくらいかかる?

ここまで、Googleタグマネージャが一体どんなものなのかを解説してきました。では導入しようか、となる前に考えておきたいのが、「導入のコスト」です。コストといっても、Googleタグマネージャは無償で利用可能のため、利用料金は発生しません。そのため、目に見える形での出費は0円で利用できます。

しかし、利用料金というコストはかからなくても、「導入作業=作業時間」というコストは絶対にかかってしまいます。導入作業について詳しくは次章にて取り上げますが、ざっと挙げただけでも以下のような作業が発生します。特に、導入しようとするWebサイトの規模が大きくなればなるほど、また、Googleタグマネージャへ管理を移行するタグの種類が増えれば増えるほど、作業量は増えていきます。

●導入で必ず発生する作業

  • Webサイト内の全ページのHTMLにGoogleタグマネージャのタグを記述する
  • Googleタグマネージャで管理することに決めたタグをHTMLから削除する
  • Googleタグマネージャの管理画面で配信の設定を行う

また、Googleタグマネージャはあくまで「タグを管理しやすくする」ツールであり、導入しても直接的な売り上げや利益といった目に見えやすい成果につながるものではありません。そのため、導入の作業コストは無視できるものではないでしょう。しかし、今後のタグの編集などの作業量を格段に減らせることを考えれば、長期的に見れば導入した方が時間コストの面でも良くなることは確かです。

導入した方がいいけど、導入時にはそれなりの作業量が発生してしまう……。ジレンマが発生してしまっている状態ですが、どうすればいいのでしょうか?

おすすめはリニューアル時の「ついで」

筆者がおすすめしたいのは、Webサイト全体を編集するほかの作業のタイミングで「ついで」に導入してしまう、という方法です。実際の導入で時間が取られるのは、「Googleタグマネージャのタグを記述する」と「既存のタグを削除する」の2つの作業です。つまり、ネックとなるのはすべてのページのHTMLを編集する必要が出てくることなのです。

そこで、例えばWebサイトのリニューアル時など、全ページのHTMLを編集する作業があった際に一緒にGoogleタグマネージャの導入も行ってしまえば、別々に行うよりもその負担もぐんと減るというわけです。もちろんリニューアル時に限らず、新規にWebサイトを立ち上げる際も、最初からGoogleタグマネージャを導入しておけば後からHTMLを編集する必要がなくなります。また、もしWebサイトがCMSなどテンプレートで管理されている場合は、いくつかのテンプレートを編集するだけで済むので、比較的導入は簡単です。

ユニバーサルアナリティクス対応もきっかけの1つ

ほかにも、2014年にはGoogleアナリティクスが「ユニバーサルアナリティクス」と呼ばれる次期バージョンへとバージョンアップが行われました。特に無償版を利用しているユーザーは強制的にバージョンアップが適用され、今後は新しいバージョンを使う必要があります。ユニバーサルアナリティクスではタグの内容が旧バージョンから変化しているため、ユニバーサルアナリティクスを万全に使いたいなら、現在Webサイト内に記述されているGoogleアナリティクスのタグをすべて書き換えなければなりません。

一応、旧バージョンのタグのままでも利用面ですぐには不具合が出ないようにはなっていますが、当然そのままではユニバーサルアナリティクスの新しい機能は使えません。また、何かの機能を利用する際に、同一のWebページ内で旧バージョンのタグとユニバーサルアナリティクスのタグを混在させると問題が発生してしまいます。そのため、いつかはユニバーサルアナリティクスにタグを移行する必要があるのです。

この移行作業も、Webサイト全体のHTMLを編集する必要があります。その際にGoogleタグマネージャを導入して、タグの管理を移行してしまうのも1つの手です。できる限り導入の作業があまり負担にならないタイミングを選び、「一緒に」やってしまうことをおすすめします。

●Googleタグマネージャを導入するおすすめのタイミング

  • Webサイトの新規立ち上げ時
  • Webサイトのリニューアル時
  • ユニバーサルアナリティクスへの移行時
新しいユニバーサルアナリティクス

アクセス解析ツールとして非常に高いシェアを誇るGoogleアナリティクスが、大規模なバージョンアップを行いました。その新バージョンが「ユニバーサルアナリティクス」です。旧バージョンは一般的に「Googleアナリティクス」と呼ばれることが多いですが、本書では混乱を避けるため「旧バージョン」という呼び方で統一します。

ユニバーサルアナリティクスでは新たに異なるデバイス間(例えばPCとスマートフォンなど)で同一ユーザーをひもづける機能が追加されたほか、旧バージョンにあった「カスタム変数」と呼ばれる機能が「カスタムディメンション」や「カスタム指標」というさらにパワーアップしたものに置き変わります。ほかにも新機能がいくつもありますので、興味があれば調べてみましょう。

●ユニバーサル アナリティクスについて - アナリティクス ヘルプ
https://support.google.com/analytics/answer/2790010

この記事は、Googleタグマネージャの初心者向け入門本となる電子書籍『実践 Googleタグマネージャ入門』の一部をWeb担の読者向けに特別公開しているものです。

実践 Googleタグマネージャ入門
時間を「劇的」に生み出すサイト修正不要のタグ管理術

本書は「Googleタグマネージャ」を解説する国内初の書籍です。Googleタグマネージャ認定パートナーのアユダンテ株式会社が、基礎知識から実際の設定方法までをていねいに解説。仕組みや基本的な考え方を理解できるよう、ひと通りの機能を網羅します。

2014年10月にリニューアルされた新インターフェースに完全対応。アクセス解析、リスティング広告、リマーケティングタグなどを日々扱うWeb担当者の方、またはWebサイトを管理しているシステム担当者の方に「今」おすすめの一冊です。

電子書籍『実践 Googleタグマネージャ入門』の中身や購入についてもっと見る
  • 実践 Googleタグマネージャ入門 時間を「劇的」に生み出すサイト修正不要のタグ管理術
  • 品種:電子書籍(リフロー形式/4.39MB)
  • 著者:畑岡大作(アユダンテ株式会社)著
  • 電子基準価格:1,000円+税(販売価格はストアにより異なる場合があります)
  • 発行:インプレス
  • 発売日:2014年11月10日
  • ページ数:160ページ
  • 書籍内容&販売サイト紹介
この記事が役に立ったらシェア!
tweet48このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
SEOやアクセス解析のなどノウハウをゲット
事例やインタビューも見逃さない
要チェックのセミナー情報も届く
編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
SEOやアクセス解析のなどノウハウをゲット
事例やインタビューも見逃さない
要チェックのセミナー情報も届く
編集長コラムを一足先に読める

今日の用語

グーパス
鉄道の改札機を通ったときに、地域情報などの情報を携帯電話にメールで送信するサービ ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore