「OWN Tag Manager」自分のサイトだけで利用できるタグマネージャーの構築 ver1

tag-654697_1280
LINEで送る
Share on GREE
Share on LinkedIn

企業でホームページの管理をしている人であれば、「タグマネージャー」という存在を知っていると思いますが、一般的にはあまりメジャーなものではありません。
 

タグマネージャーから見るJavaScriptタグのあり方 | bitwave
 

会社のホームページなどサイト内に沢山のWEBページが存在し、それらのHTMLファイルをひとつずつ管理する事は中々難しいので、「タグマネージャー」というjavascriptタグを1つだけ貼り付けておけば、管理画面による設定を行なうだけで、どのページにどういうタグ(javascriptタグや、各種外部サービスタグ)を貼り付けるかの設定が、一括で行えるというものです。
 

今回は、一見便利に見えるタグマネージャーだけど、利用者からは沢山の不満の声が出ている事情を仕事を通じて聞いたので、いっその事自分のサイトだけで使えるタグマネージャーが存在すれば使う人によっては便利に使えるという事で、簡単に作ってみてソースコードを公開しておきます。

仕様について

まずタグマネージャーという事で、WEBサイトの実HTMLは、基本的に最初にJavascriptタグを設置しておいて、その後の変更などの運用はタグマネージャーのみで行なう仕様にします。
 

基本コアであるjavascriptと、設定jsonファイルの構成で、ページグループ毎にjsonファイルを追加作成して、そのファイル名(グループ)をHTMLに最初にセットしておくという構成です。
 

手抜きと思われるかも知れないが、今回は管理画面は存在しません。データであるJSONファイルは、手作業で書き換えてください。

ソースファイルとデータサンプル

own_tagman.js(コアエンジン)

own_tagman.json(データ部分)

HTMLファイル記述

使い方説明と解説

まず、own_tagman.jsとown_tagman.jsonは、表示するhtmlファイルと同階層に設置していますが、変更して利用することも可能です。
HTMLへの記述内容の./own_tagman.js(.json)の箇所を対象のパスに変更するだけです。
 

設定の重要ポイントは2点のみです。
 

1、jsonファイルは、タグ管理をする際の同じ構成のページグループで1ファイルセットするようにしましょう。
 

2、jsonファイルの内容は、大きな配列構造になっており、それぞれの要素が下記の内容になっています。

append : headまたはbody(どのタグに追記するかのセット※デフォルトはheadに追記されます)
type : jsまたはcss
path : ファイルの設置されている絶対パス、または相対パス

 

物足りない人へ

実は、よく使われているタグマネサービスと比べると機能が圧倒的に少ないという事が分かりますが、今回のバージョンは、ヘッダなどに書き込むcssやjavascriptを外部ファイルで管理できるだけの機能にしています。
 

これだけの機能でも便利に使える人も意外といるので、敢えてこのバージョンをアップしましたが、
 

他に欲しい機能として以下のようなモノがあると思います。
 

・HTMLへの入力を全て共通にする(表示するURL毎に自動で出し分ける)
・ファイブファイルの読み込みタグだけではなく、GoogleAnalyticsなどのような、script記述も行いたい
・URLだけではなく、クエリや、ページ無いのエレメント(要素)の存在可否で出し分けたい

 

上記の対応版をver2として、後日公開する予定です。
 

そして、もちろん使っていく上で管理画面が欲しいとか、自分のサイトのシステム連動したいという要望がある人もいるかもしれません。
 

ご希望の要望がございましたら、構築することもできますので、お問い合わせくださいませ。
また、疑問や質問がある場合もお気軽にお問い合わせください。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です