【GTM】WordPressにGTMを導入して機能追加してみた(2)

2025年11月18日

本記事はこちらの続きです

【GTM】WordPressにGTMを導入して機能追加してみた(1) GTMを使えば、特定のページに HTML / CSS / JavaScript を後付けできる（事前にGTMコードの挿入だけ必要）ということで、実際にこのブログサイト（WordPress / SWELLテ…

前回、実際にGTMでアカウントとコンテナを作り、簡単な機能（WordPressで作成したWebサイトの特定ページにアラートを出す）を追加してみました。そこで本記事では、より実践的なカスタマイズとして3つの機能を追加実装してみました。

下準備（導入ページ側の準備）

今回は、テスト用ページ（https://noveblo.com/gtm-test/）に以下のブロックを入れておきました。

<p class="gtm-css-test">このテキストはGTM経由のCSSで赤くなる予定です。</p>
<button class="gtm-js-test">GTMテストボタン</button>

あとはGTM側で、gtm-css-test と gtm-js-test をそれぞれ取得し、CSSを適用したりクリックイベントを付与したりします。

【1】HTMLで新しい要素の追加

タグを新規作成します。
GTM管理画面の左メニューにある「タグ」を選択し、右上の「新規」をクリック。

「タグタイプを選択して設定を開始…」をクリック。

「タグタイプを選択」メニューが表示されるので、「カスタム」の「カスタムHTML」を選択。

HTMLに、以下コードを記述。（h1 タグの直下に<div>要素を追加）

<script>
  (function() {
    // ページ内の最初の h1 を取得
    var h1 = document.querySelector('h1');

    // h1 が存在する場合のみ処理する
    if (h1) {
      var div = document.createElement('div');
      div.textContent = '※※※GTMで追加されたテキストです※※※';
      div.style.margin = '20px 0';
      div.style.padding = '10px';
      div.style.border = '1px solid #ccc';
      div.style.backgroundColor = '#f9f9f9';

      // h1 タグの「直後」に挿入
      h1.insertAdjacentElement('afterend', div);
    }
  })();
</script>

続いてトリガーの選択をクリックし、前回作成したトリガー（gtm-testページ用）を選択。

最後に右上の「保存」をクリック。

・・・と思ったら、名前を付けるのを忘れていたので名前を付けて保存。

【2】CSSでデザインの変更

続いてCSSを追加します。
先ほどと同様、タグの新規追加を行います。カスタムHTMLで以下コードを記述します。

<style>
  .gtm-css-test {
    color: red !important;
  }
</style>

トリガーも同じものを選択して保存。

【3】JavaScriptでクリックイベントの追加

続いてJavaScriptを追加します。
こちらも全く同様、タグの新規追加を行います。カスタムHTMLで以下コードを記述します。

<script>
  (function() {
    document.addEventListener('click', function (e) {
      if (e.target && e.target.classList.contains('gtm-js-test')) {
        alert('GTMで追加されたアラートです');
      }
    });
  })();
</script>