サイトを運用していると、例えばトップページのサイドバーにバナー画像を出したくなったり、ユーザーへの告知用のメッセージをトップページに出したいなどということがあります。この時、自由にその場所のHTMLを書き換えたいけど、書き換えるたびにコードをデプロイしないといけないと大変です。そこで、今回はGoogle Tag Managerを使ってバナーやメッセージを配信するのを試してみたので紹介します。
どうやってやるのか
Google Tag ManagerはAnalyticsの設定を入れたり、任意のHTMLを入れたりなど、Googleの管理ツールを触るだけで簡単にサイトにタグを入れたりできるツールです。そしてGoogle Tag ManagerのカスタムHTMLというのを利用することで、自分の好きなHTMLタグをサイトに差し込むこともできます。
これを利用して、カスタムHTMLにバナーを入れるためのscriptタグを入れることで、Googleの管理ツールを少しいじるだけで、サイト内部のHTMLを書き換えることが出来るようにしてみようと思います。
今回はGoogle Tag Managerの初期設定は終わっている前提で紹介します。
トリガーを設定する
まずバナーの差し込みを発生させるためのトリガーを設定します。
この左のサイドバーからトリガーをクリックして、その後「新規」というボタンを押します。トリガーの設定は以下のようにします。
- イベントは「ページビュー」を設定
- トリガーのタイプは「DOM Ready」
- 配信するタイミングには「一部のページビュー」を選択し、「url pathを/に等しい」にします
これで、「トップページを開いてDOMが読み込み完了したら発火する」というトリガーを設定することができました。ちなみにこのトリガーは結構柔軟で、URLが正規表現にマッチした時とか、カスタムイベントが発火した時とか、クリック時に発火してそのエレメントのIDが◯◯であった時、とか結構何でも設定できそうでした。https://support.google.com/tagmanager/answer/6106961?hl=ja を参考にしましょう。
続いてこのトリガーが発火した時に差し込むタグを設定します。
タグを設定する
続いて左のサイドバーからタグをクリックし、「新規」ボタンを押します。そして、「カスタムHTMLタグ」をクリックします。
タグを設定のところには以下のようなscriptを書きます。このスクリプトでやっていることは単純で、js-gtm-banner-containerクラスを持っている要素の中に、差し込みたい任意のHTMLタグを挿入しているだけです。これにより、サイトにこのクラスを持った要素を置いておけば任意のHTMLを差し込めるようになります。
<script> var container = document.querySelector('.js-gtm-banner-container'); container.innerHTML = '<a href="http://blog.shibayu36.org/">shibayu36のブログです</a>'; </script>
配信するタイミングでは、その他を選択し、先ほど作ったトリガーを選択します。
ここまで来たらGoogle Tag Managerで変更を公開しておいてください。
これで設定はひとまず完了です。今の段階で、「トップページを開いたらその中にあるjs-gtm-banner-containerクラスを持つ要素の中に任意のHTMLを挿入する」という設定をGoogle Tag Managerを使って設定することができました。
サイトの差し込みたい場所に要素を置いておく
ここまで設定できたら、サイトのトップページのバナーやメッセージを差し込みたい場所に以下の様なHTMLを置いておくだけです。
<div class="js-gtm-banner-container"></div>
これを書いた状態で一度だけデプロイしておけば、あとはGoogle Tag Managerのcontainer.innerHTMLに代入している部分を書き換えるだけでサイトのデプロイなしに該当箇所のHTMLを変更することが出来るようになりました。HTMLをいろいろ書けるので、画像を置いたりリンクを置いたりとなんでもできますね。
