GoogleTagManagerでサイトに一定期間だけメッセージを表示しよう

年末年始やお盆休みの時だけページにメッセージを表示したり、ちょっとセミナーを紹介したい時にも、GTMはぴったりです。あるコンテンツ、DOMの上にHTMLのパーツを表示したり、JSで動きをつけたりと、いろんなことができるのです。
2017.12.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

もう年末年始ですね。GW休暇や夏休みなど、一時的にサイトにメッセージを出したい時にオススメの方法です。すでにGoogleTagManager(以下、GTM)を導入している方向けの内容となっています。もう少し根本的な話はまた今度、ブログで書こうと思います。

新しいタグの作成

GTMにログインして、「新しいタグ」を選択します。

新しいタグを選択する

タグタイプに「カスタムHTML」を選択

タグには適当な名前を付けてください。今回は「Corp_年末年始2017メッセージ」としています。

「タグの設定」をクリックし、「カスタムHTML」を選択します。

タグに名前をつけ、カスタムHTMLを選択する

カスタムHTMLの設定

HTMLに以下のコードを入力します。
(なお、サイトでjQueryを利用していない場合は動きません。)

<script>
$("iframe").before('<p class="temp-message">誠に勝手ながら、12月23日(土)〜1月3日(水)の間は休業となります。<br>上記期間中にいただいたお問合わせにつきましては1月4日(木)より順次対応いたしますので、何卒よろしくお願いいたします。</p>');
</script>

カスタムHTMLにスクリプトを入力する

今回は問い合わせフォーム(iframe)の直前にメッセージを表示したかったので、iframeを指定しています。
ちなみに、iframeの場合はSNSボタンなどでも利用されていることがあるので、それらが対象外になるように調整してください。

トリガーの設定

サイト全体を指定したい場合は、「All pages」(すべてのページ)を選択します。
表示したい箇所が一部の場合は、URLなどで細かに設定しましょう。ここでは割愛します。

トリガーにすべてのページを選択した場合

選択したら、「保存」ボタンを押してください。

プレビューで確認

一覧ページに戻るので、右上にある「プレビュー」ボタンをクリックします。

指定したページに表示されているか確認してください。

プレビューで確認する

タグに掲載期間の設定

さきほど設定したタグ(Corp_年末年始2017メッセージ)を開き、HTMLをクリックします。

下の方に「詳細設定」が選択できるようになるので、クリックし、「カスタムのタグ配信スケジュールを有効にする」にチェックを入れます。今回は年末年始のメッセージなので、開始日と終了日に表示したい期間を設定します。また、ページが表示されたときに1度だけ配信されればいいので、「タグ呼び出しオプション」も「1ページにつき1度」に変更しておきましょう。

配信スケジュールの設定

公開

右上の「公開」ボタンを押して、リリースしましょう!
GTMでは、自動的にバージョン管理されるのも安全に使える理由のひとつです。
万が一、想定外のエラーが発生してしまった場合は、焦らずにバージョンを戻しましょうね。。。

それでは、良いお年を!