Google Tag Manager を利用して指定したIDの位置にコンテンツを挿入する

Google Tag Manager を利用して指定したIDの位置にコンテンツを挿入する手順を紹介します。

概要

こちらの記事ではGoogle Tag Managerを利用してGoogle Analyticsのタグの設置、こちらの記事では Google Tag Managerを利用して独自のタグを配置する手順を紹介しました。
この記事ではページ内の要素に対して、Google Tag Managerを利用してHTMLのコンテンツを挿入する手順を紹介します。

ページの作成

Google Tag Managerのタグを設置したページを作成します。
以下のHTML、CSSファイルを作成します。

set-content.html

<!DOCTYPE html>
<html>
<head>
  <!-- Google Tag Manager -->
  <script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-5G7RFGLB');</script>
  <!-- End Google Tag Manager -->

  <link rel="stylesheet" href="set-content.css" />
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5G7RFGLB"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
  <!-- End Google Tag Manager (noscript) -->

  <p>コンテンツをTag Managerで挿入するデモ</p>
  <div class="Frame">
    <div class="ContentTitle">コンテンツ</div>
    <div id="Content1"></div>
  </div>
</body>
</html>

set-content.css

.Frame {
  border:1px solid #ff6a00;
  background-color:#fff8d2;
  margin: 2rem 2rem 2rem 2rem;
}

.ContentTitle {
  font-weight:700;
}

ページを配置します。ページを表示すると下図のページが表示されます。

Google Tag Managerの設定

事前準備

Google Tag Managerのアカウントがない場合や、コンテナがない場合は作成します。

トリガの作成

Google Tag Manager にログインします。コンテナのページを表示します。
左側のメニューの[トリガー]の項目をクリックし、トリガーを作成します。

先にアップロードしたページのみで実行されるトリガーを作成します。手順はこちらの記事を参照してください。
トリガーを作成した状態が下図です。

タグの作成

コンテナのページの左側のメニューの[タグ]の項目をクリックします。

下図のページが表示されます。右側のエリアの右上の[新規]ボタンをクリックします。

タグの作成ダイアログがスライドイン表示されます。[タグタイプを選択して設定を開始...]のエリアをクリックします。

下図の[タグタイプを選択]のダイアログが表示されます。[カスタム]のセクションの[カスタム HTML]の項目をクリックします。

タグの設定画面に切り替わります。

HTMLのテキストボックスに以下のコードを記述します。
id="Content1"の要素のタグ内に「<p>コンテンツのなかみです。</p>」を表示するコードになります。

<script type="text/javascript">
    window.onload = function onLoad() {
      target = document.getElementById("Content1");
      target.innerHTML = "<p>コンテンツのなかみです。</p>";
    }
</script>