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

「GTM」などで検索し、Google Tag Manager の公式ページを開く。
Googleアカウントにログインしていれば以下ページが開くので、「アカウントを作成」をクリック。

GTMの中には、

• アカウント：会社・サイトのまとまり
• コンテナ：実際にタグを入れていく箱（＝サイト単位）

という2段階の概念があるとのこと。

アカウント名は自分がわかる適当な名前として「noveblo」を入れて、国は「日本」を選択。データを共有する予定はないのでチェックは外す。

コンテナ名にはGTMを導入するサイト名「 noveblo.com」を入れて、ターゲット プラットフォームは「ウェブ」を選択。

「作成」をクリックすると、以下のような英文の規約が出てくるので、「はい」をクリック。

ここまでくると、いきなりコード（スニペット）が画面に表示される。

ポップアップを閉じてしまった場合は、
「管理」タブ → 「Google タグ マネージャーをインストール」で再表示できる。

WordPressの管理画面にて、
「外観」→「カスタマイズ」→「高度な設定」へ進み、

• headタグ終了直前に出力するコード：<!-- Google Tag Manager --> ではじまるコード
• bodyタグ開始直後に出力するコード：<!-- Google Tag Manager (noscript) --> ではじまるコード

をそれぞれコピペし、「公開」をクリック。

Googleタグマネージャーに戻る。
先ほど作成したアカウントページの右上にある「プレビュー」をクリック。

コードをコピペしたウェブサイトのURL（https://noveblo.com/）を入力。

リンクすると、別ウィンドウで入力したウェブサイトが開き、「Tag Assistant に接続しました」というポップアップが表示される。また、GTMのページでは「Tag Assistant [接続済み]」がタブに表示される。

今回は特定のページ（https://noveblo.com/gtm-test）にのみ機能追加を行いたいので、このページだけで発火するトリガーを作成する。

GTM管理画面の左メニューにある「トリガー」を選択し、右上の「新規」をクリック。

左上の名前を「gtm-testページ用」に変更し、
「トリガーのタイプを選択して設定を開始…」をクリック。

「トリガーのタイプを選択」メニューが表示されるので、「ページビュー」の「DOM Ready」を選択。

「一部の DOM Ready イベント」を選択、条件を以下のように設定。
{{Page URL}} 含む gtm-test

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

動作チェック用のタグを作ります。

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

左上の名前を「テストアラート（gtm-test）」に変更し、
「タグタイプを選択して設定を開始…」をクリック。

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

HTMLに、以下コードを記述。
（ページを開くと ダイアログボックス が表示されるシンプルなJavaScriptコード）

<script>
  alert('GTMからのテストアラートです');
</script>

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

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

もう一度、アカウントページの右上にある「プレビュー」をクリック。（STEP 3を参照）
今回はトリガーとなるページ（https://noveblo.com/gtm-test/）を入力。

無事にアラートが表示されました。

本番環境で適用するため、タグの「公開」を行います。

GTM の管理画面に戻り、右上（プレビュー横）の「公開」をクリック。

「バージョン名」と「バージョンの説明」を入力し、「公開」をクリック。

これで、本番環境にも適用されました。
（実際にページを訪問すると、アラートが表示されました。）

ブラウザのキャッシュなどが邪魔をして反映されないことがあるので、Ctrl + F5（スーパーリロード）をするのがお薦めです。