こんなことありませんか？

年末年始など休日のタイミングでバナーや文言を差し替える類の依頼があった際、そのためだけに休日出勤された経験はありませんでしょうか。
この記事は、コンテンツの一部の更新をGoogleタグマネージャー（GTM）を利用することで少しはラクができるのでは・・・という内容になります。

差し替えるソースを確認する

今回は一例として、本サイトのロゴを正月ロゴ*に差し替える場合を想定したサンプルを用意したいと思います。

*サンプルで用意した正月ロゴはAdobeのFirefly（Beta）で生成してます。

参照：https://firefly.adobe.com/

まずは稼働中のソースからロゴが配置されている箇所の確認し、「id」「class」など差し替えるためのセレクタを見つけます。

今回であれば、ロゴやその親要素にidもclassも存在しないため、親要素から以下のようなセレクタを指定する必要がありそうですね。

header > a > h1 > img

GTM上でトリガーを登録する

トリガーとはタグが発行される条件になります。
今回の場合であればグローバルナビゲーション上の共通ロゴになるわけですので「ページにアクセスしたタイミングでロゴを差し替える」というトリガーを設定する必要があります。
なお、ページにアクセスした際のトリガーは以下のような種類があります。

1. 同意の初期化: 同意に関する設定を、確実に他のすべてのトリガーの配信よりも前に適用するためのトリガータイプです。「同意の初期化」トリガーは、サイトのユーザー同意ステータスを設定または更新するタグ（同意管理プラットフォーム タグ、同意のデフォルト値を設定するタグなど）に使用します。各ウェブコンテナには、デフォルトで「同意の初期化 – すべてのページ」トリガーが含まれています。「同意の初期化」トリガーは、単にタグを早い段階で配信する用途では使用しません。その用途の場合は「初期化」トリガーを使用してください。
2. 初期化: 「同意の初期化」トリガーを除いて最も早く配信するタグ用のトリガータイプです。各ウェブコンテナには、デフォルトで「初期化 – すべてのページ」トリガーが含まれています。他のトリガーよりも前に配信する必要があるタグには、このトリガータイプを使用しましょう。
3. ページビュー: ウェブブラウザがページの読み込みを開始するとすぐに発動します。ページのインプレッションから生成されたデータのみが必要な場合は、このオプションを使用します。
4. DOM Ready: ブラウザで HTML のページの読み込みが完全に終了し、ドキュメント オブジェクト モデル（DOM）が解析できる状態になった後に発動します。DOM に対応して変数に値が入力されるページベースのタグの場合は、タグ マネージャーで正しい値が使用されるよう、このタイプのトリガーを選択してください。
5. ウィンドウの読み込み: 画像やスクリプトなどの埋め込みリソースを含め、ページが完全に読み込まれた後に発動します。

参照：https://support.google.com/tagmanager/answer/7679319?hl=ja

今回は、ロゴのHTMLを差し替える必要があるので「DOM Ready」を指定します。
登録が完了したら後でわかりやすいように「ロゴ差し替えトリガー」という名前で登録します。

トリガーの設定内容は以下の通りになります。

GTM上でタグを登録する

次に先ほどのトリガーを利用してタグをセットします。
新規でタグを作成し、カスタムHTMLをセットしたうえで、先ほど用意した「ロゴ差し替えトリガー」をトリガーにセットします。

続いてカスタムHTMLに以下のようにタグの書き換えをJavascriptで記述します。

<script>
  document.querySelector('header h1').innerHTML = '差し替え内容';
</script>

jQueryで書きたい場合は以下のような感じ

<script>
  $('header h1').html('差し替え内容');
</script>

開始・終了タイミングをセットする

今回のメインになります。
詳細設定内から「カスタムのタグ配信スケジュールを有効にする」にチェックを入れ、開始日・終了日の日時をセットすることで指定期間内だけ差し替えが実行されるようになります。
年始の1月1日の00:00～1月3日の23:59までの期間表示させたい場合は以下のようになります。

事前にプレビューし問題ないことを確認してから公開する

最後に正しく動作しているかを事前にプレビューして確認しておきます。
※開始日が先の日付になっている場合はタグが発火しないため、プレビュー時に発火するように開始日を調整しておく必要があります。

ロゴが差し変わっていることが確認できましたので、開始・終了日時を忘れずにセットし「公開」を押すことで終了となります。

お疲れ様でした！

メリット・デメリット

前提知識としてCSSセレクタと簡単なJavascriptを理解している必要があるため、必要に応じてエンジニアさんと連携しながら調整するのもよいかと思います。

以上のことを踏まえたうえで、GTMでの更新でラクができそうであれば検討してみてもよいのではないでしょうか。