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度」に変更しておきましょう。

配信スケジュールの設定