ノウハウをいつでも。ウェブマーケティングのポータルサイト

制作日誌

管理がすごく楽!Google Tag Managerを使って、サイト内のタグを一元管理!

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
サイト内では、アクセス解析用のタグや広告用のタグなど、コンテンツ以外にも様々なタグが入っていますが、サイトの規模が大きくなるにつれてタグの管理は大変になっていきます。そこで、タグの一元管理には「Googleタグマネージャー」がぜひともおすすめです!


Googleタグマネージャーとは?

tagmaner.png 「Googleタグマネージャー」 は 2012年にgoogleから誕生した新ツールです。日本語インターフェースもリリースされています。 その名のとおり、タグの管理(タグマネジメント)ができるツールであり、サイト内で使用している様々なタグを、1つの管理画面上でまとめて管理が可能です。

例えばあるサイトで、「Googleアナリティクス」はすべてのページ、「キャンペーンバナー」はコラムページのみ、「広告バナーA」はコラム記事ページだけに入れたいという場合。


tag manager.jpg 通常このような場合、各ページのhtmlにそれぞれのタグを記述しなければなりません。そのためタグの変更時にはサイト管理者にお願いして、全ページまたは指定箇所のタグ入れ替えをしなければならずかなり面倒です。

Googleタグマネージャーを使えば、各ページのタグ変更がこれまでよりも簡単に行えます。


tagmane.jpg 「コンテナ」という箱でタグを一括管理して、設定したルールに従って各ページにタグを配信します。


Googleタグマネージャーを導入した方がよい場合



サイト内に様々なタグが埋め込まれている場合

様々な種類のタグを使用している場合は、どこにどのタグがあるのかを把握したり、変更が必要となった場合にとても面倒です。全てのタグを1つの管理画面上で一元管理できる方が明らかに良いです。


ページ毎に異なるタグを埋め込む必要がある場合

全ページ共通のタグならば、ヘッダー部分をテンプレート化して、そこに埋め込むだけでいいのですが、問題は「トップページにはこのタグを埋め込むけど、コラムページにはいらない」というようなケース。Googleタグマネージャーではタグを配信する「ルール」を設定できるので、ページごとに埋め込むタグを条件分岐させたい場合にとても便利です。


サイト内のタグ変更を外部の会社などに依頼している場合

サイトの管理・変更を外部の会社にお願いしている方も多いと思うのですが、タグの変更が発生する度に管理会社に依頼しては手間と時間がかなりもったいないです。タグの管理だけでもGoogleタグマネージャーを使って自分たちでやった方が良いと思います。



広告バナーの一元管理

今回やりたかったのはこれです。タグマネージャーを使用する場合、一般的にはGoogle AnalyticsやGoogle Remarketingのタグ管理だけに利用することが多いと思いますが、SIM PRICE(シムプライス)では各ページの広告バナーも一元管理しています。

例えば、コラムページの右サイドバーにある広告バナー。
side.png 固有idのdivを置いて、タグマネージャー管理画面でコラムページ配下に配信する「タグ」を設定します。

サイト上に記述するタグ

<div id="colum-side-bannerA"></div> 


Google Tag Managerで登録しているタグ


<script>
if(typeof jQuery != "undefined"){
    $(function(){
        $("#colum-side-bannerA").prepend('配信したいHTML広告タグ');
    });
}
</script>

簡単に言うと、配信する位置だけをidで指定しておいて、管理画面上で配信するタグを設定するという流れになります。


ルールの設定

タグを決めた後に、「ルール」を設定することで、配信する条件を決めます。
  • 全てのページ
  • URLに"/colum/"を含むページのみ
例えば上記のように、ページURL単位で配信条件を分けることができます。

さらに詳細設定では配信する「期間」を決めることができます。
term.png 「カスタムのタグ配信スケジュールを有効にする」にチェックをして、開始日&開始時間と終了日&終了時間を設定します。

SIM PRICEではリリース記念として、7月23日から9月30日まで特別キャンペーンを実施していますが、このキャンペーン用バナータグとHTMLタグは配信スケジュールを2014年10月1日 0時までと設定しています。

これで以下のバナーをキャンペーン中だけ表示することができ、タグの取り忘れを防ぐことができます。


bnr-campaign-simprice.jpg

注意点

Googleタグマネージャーでバナーを一括管理する際に、戸惑った部分がいくつかありました。

Google AdSenseタグの登録

GoogleAdsenseを導入する場合は、以下のよう Google側が発行するタグ(JS部分)を切り分けて登録しないと、サイト上で表示されませんでした。

Google Tag Managerに登録したタグ

<script>(Google側が発行するjs部分)</script>
<script>
if(typeof jQuery != "undefined"){
    $(function(){
        $("#google-ad").prepend('(アドセンスのタグ)');
        (adsbygoogle = window.adsbygoogle || []).push({});
    });
}
</script> 



レスポンシブ対応のクリッパブルマップ用jQueryプラグインが動かなくなった。

フリーSIMカードについて」のページで、キャンペーン用バナーにクリッカブルマップを使用しています。

link.jpg
※クリッカブルマップとは?
画像データにリンクを貼るときに利用する技術です。

<img src="画像URL" usemap="#Map" alt="SIMカードについて"
 class="keyvisial"> 
<map id="Map" name="Map"><area href="#campaign" 
coords="897,227,1139,287" shape="rect"></map> 

上記のようにmapタグで画像のname属性を決め、areaタグでリンクを貼る場所のcoords属性で座標を指定します。shape属性でリンクの"形"を指定します。

以下のようにshape属性によってcoords属性の座標の指定の仕方が変わります。
 
shape属性 coords属性
rect 四角形 四角形の左上の座標(x,y)、右下の座標(x,y)
circle 円形の中心の座標(x,y)、半径の長さ®
poly 多角形 多角形の全ての角の座標(x,y)

レスポンシブ Web デザインでクリッカブルマップを使うとき、画像の大きさが変わることで、指定した座標がズレてしまいます。

そこで、Responsive Image Mapsというレスポンシブに対応するjQueryプラグインを使いました。

キャンペーン用のキービジュアルバナーをGoogleタグマネージャーを使って表示させようとしたのですが、なぜか座標がズレたままで、このjQueryプラグインが効きませんでした。やむおえず、キャンペーン用のキービジュアルバナーだけは手動で管理することにしました。



さいごに

今回初めてGoogleタグマネージャーを使ってみました。最初は設定方法に戸惑いましたが、一度慣れてしまえばタグ管理が驚くほど楽になったと感じます。これからぜひどんどん使っていきたいと思います。

企業のWeb担当者、管理者の方も、ぜひ使えるようになっておくことをおすすめします!

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

ノビタ

のび太

Web制作会社「NOBITA」の社長をやっております、のび太と申します。大学卒業後、お金を貯めカナダに留学。バンクーバーのビジネス学校で好きな人に出会ってしまったため、日本に帰らず現地企業に就職。未経験ながらWeb制作、メディア運営、ライター業などの仕事に奮闘する。帰国後、フリーランスのWebデザイナーとして独立し、2014年5月、自身の会社を設立。「伸びていくWebサイトをお届けする!」がモットー。 ブログ:がんばれ!のび太!

他の参加者を見る

のび太

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!