2. 特定のページだけにカスタムJavaScriptをタグとして配信する

Updated
2021/8/8 8:24
Author
Jumpei IkegamiJumpei Ikegami
前回のチュートリアルでは、Googleアナリティクス(以下、GA)のタグをGoogleタグマネージャー(以下、GTM)で全ページに配信してみました。今回はより使い方の自由度を上げて、トリガーを新規作成し任意のJavaScriptを特定のページだけに配信してみようと思います。

前提知識

このチュートリアルは、次のチュートリアルの続きです。
1. GoogleタグマネージャーでGoogleアナリティクスのタグを設置する2021/6/20 5:292021/8/8 8:12
 
また、JavaScriptでページ上の要素を操作する部分では、次のチュートリアルを先にやっておくことをおすすめします。
ブックマークレットと簡単なJavaScriptで業務を効率化する2021/5/9 3:562021/6/20 8:09
 

やること

GTMのタグが設置されたWebサイトの特定のページだけに、GTM経由で任意のJavaScriptを配信します。

体験すること

このチュートリアルによって、以下を体験します。
  • GTMのトリガーを理解する
  • GTMで特定ページでだけ発火するトリガーを作成する
  • GTMでカスタムHTMLを配信する

チュートリアルスタート!

ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。

トリガーとは何かを理解する

GTMでは、トリガーと呼ばれる設定によって、タグが配信されるタイミングを決めることができます。前回のGAタグの配信では "All Pages" (すべてのページビュー)という予め用意されたトリガーを使ったのでそこまで意識をすることはありませんでした。ここでは改めて、トリガーとは何かを理解しましょう。
GTMで設定できる主なトリガーのタイプは次の通りです。
  • ページビュー
  • クリック
  • フォーム送信
  • スクロール距離
  • カスタムイベント
基本的にGTMで利用するトリガーは「Webブラウザ上でのエンドユーザーの行動」をもとに指定します。たとえば、このページを見たユーザーにこのタグを配信する、このリンクをクリックしたユーザーにこのタグを配信する、などです。GTMを使ってサイトが連携するGAなどの外部サービスの多くは、ユーザー行動のトラッキングを伴います。GTMが特定の行動をとったユーザーだけに外部サービスのタグを実行することで、ユーザー行動のトラッキングを実現しているというわけです。なお、最も多く使われるトリガーのタイプは、ページビューです。今回の記事では、ページビューを使ったトリガーの設定をしていきます。
ちなみに、トリガーには「Webブラウザ上でのエンドユーザーの行動」を利用すると言いましたが、より広く正確には「Webブラウザの状態変化」がトリガーに使われます。こうした「Webブラウザの状態変化」は、ブラウザ上で起きる出来事という意味で、一般に「イベント」と呼ばれます。GTMでは、「カスタムイベント」という形でトリガーに使うイベントを独自に定義することもできます。

ページ上の要素を消すタグを作成する

トリガーについて理解したところで、さっそくページビューを使った独自のトリガーを使ってみましょう。しかし、トリガーを設定するには配信するタグが必要です。
ここでは、例としてページ上のある要素を消してしまうようなタグを作成してみます。もしあなたがWebサイトを管理しているとすれば、「ある要素を一時的に非表示にしたい」と思うことがきっとあるはずです。それをGTMで実現してみましょう。この記事の例では、本サイトのaboutページでだけサイトのロゴを削除してみます。あなたは、ご自身が管理しているWebサイト上の要素から、試しに消してみたい要素を選んでみてください。
notion image
↑GTMを使ってABOUTページだけヘッダーを消してみる
さて、削除する要素が決まったら、GTMの管理画面にログインします。画面上部に表示されるコンテナが配信先のサイトのものであることを確認します。
[タグ > 新規]からタグを新規作成します。[タグの設定]をクリックすると、[タグタイプを選択]画面が開きます。ここでは、任意のJavaScriptを配信したいので、[カスタム > カスタムHTML]を選びます。(「JavaScriptを配信するなら "カスタムJavaScript" じゃないんかい」とツッコミたくなるかもしれませんが、実はJavaScriptはHTMLの中に書いて実行させることができます。つまりHTMLを配信できればJavaScriptの配信も事実上可能であり、HTMLの方がより汎用的なので、 "カスタムHTML" という名称になっているわけです。)
[カスタムHTML]を選ぶと、HTML編集画面が開きます。ここでは、次のようなJavaScriptを記述してみましょう。
HTML
ただし、「消したい要素のCSSセレクタ」と書いてある部分には、実際にタグを配信するページ上の消したい要素に対応するCSSセレクタを記載してください。CSSセレクタの取得方法については、次のチュートリアルをご覧ください。
2. ワンクリックでAmazonの商品名をGoogle検索するボタンを作る2021/6/20 4:332021/8/8 8:00
コピーする場合は、クォーテーションマーク(')まで消さないように注意してください。
簡単に、記述内容を解説します。
まず、JavaScriptをHTMLの中に書く場合、HTMLのscriptタグの中に囲む必要があります。scriptタグのtype属性に "text/javascript" と書くことで、JavaScriptをこの中に書くぞーということを宣言しています。(なお、このtype属性が無くても、大抵のモダンなブラウザでは問題なくJavaScriptとして実行されます。)
HTML
JavaScript部分の1行目では、実際にJavaScriptが実行されていることが後でわかりやすいように、console.log()でブラウザのコンソールにログを出力しています。
肝心なのはJavaScript部分の2〜3行目です。ここでは、CSSセレクタを手掛かりにdocument.querySelector()でページ上の要素を取得し、remove()というメソッドを呼び出してその要素を削除しています。詳細の説明はJavaScriptのリファレンスに譲るとして、ここでは雰囲気で理解してください。
notion image

特定のページだけにタグを配信するトリガーを作成する

配信するタグの準備ができたので、いよいよトリガーの設定をします。GTMでは、1つのタグでしか使わない条件でトリガー設定をする場合でも、トリガー自体を新規作成する必要があります。少し面倒ですが、トリガーを1度作っておけば、複数のタグで使いまわせるようになるので便利です。
ここでは、例として「/aboutというページを見たら配信する」というトリガーを作成してみます。実際には、あなたが消したい要素のあるページを指定してください。
さて、ここまで作成してきたタグの編集画面から、[トリガー]をクリックします。[トリガーの選択]という画面が開くのですが、「特定のページだけに配信する」というトリガーはデフォルトでは存在しません。右上のプラスボタンから、トリガーを新規作成します。
トリガーの編集画面が開いたら、[トリガーの設定]をクリックし、[トリガーのタイプを選択]という画面を開きます。ここでは、「特定のページの閲覧」をトリガーにしたいので、[ページビュー]を選択します。
さらに、「どのページビューを条件にするのか」を設定していきます。[このトリガーの発生場所]で[一部のページビュー]を選びます。すると、その下に配信条件を設定するUIが表示されます。例として、ABOUTページだけに配信するという設定をしてみます。ABOUTページは、ページパスが /about だったとします。その場合、対象ページビューの条件設定は次のようになります。
  • Page Path 等しい /about
ここで一度立ち止まって、ページビューの条件設定の方法について解説します。
GTMでは、ページビューなどのイベントが発生した場合、そのイベントに関連する値を変数として利用することができます。「変数」とは、その名の通り「変化するもの」です。ページビューを例に取ると、たとえば閲覧ページのURLやページパスは、どのページを閲覧したかによって変化するはずです。こうした「ユーザーの行動やブラウザの状態に伴って変化する値」を「変数」を使って参照することができます。ページビューに関しては、次の3つの変数がデフォルトで定義されています。
  • Page URL
  • Page Hostname
  • Page Path
Page URLは、ブラウザのアドレスバーに表示されたURL全体に対応します。たとえば、 https://non-engineers.jp/about?test=true などの値をとります。
Page Hostnameは、URLの中のドメイン部分です。たとえば、 non-engineers.jp などの値をとります。
Page Pathは、URLの中のページのパスに対応します。たとえば、 /about などの値をとります。「特定のページ」といった条件設定では、一般的にこのPage Pathを利用します。
ちなみに、これらの変数以外にも、URLを利用した変数を独自に作成することができます。ここでは詳しく説明しませんが、たとえばURLのクエリパラメタを変数として利用する場合などはそれ用の変数を作成するのが便利です。
さて、基本的にトリガーの条件は、「変数の値と固定値との比較」として設定されます。文字列の比較方法としては、主に次のものが選べます。
  • 等しい / 等しくない
  • 含む / 含まない
  • 先頭が一致 / 先頭が一致しない
  • 最後が一致 / 最後が一致しない
  • 正規表現に一致 / 正規表現に一致しない
また、右端のプラスボタンを押すと、複数の条件をANDでつなぐこともできます。
これらの設定を組み合わせて、配信したいページだけを絞り込むようなトリガーを作成しましょう。
設定ができたら、左上から適当なトリガー名を設定し、保存します。
notion image

作成したタグをプレビューする

タグの編集画面に戻ったら、改めてタグの設定が間違っていないことを確認します。
問題なければ、左上から適当なタグ名を設定し、保存します。
notion image
タグが保存できたら、前回のチュートリアルと同様、GTMのプレビュー機能を使って実際にページ上の要素が消えることを確認します。右上の[プレビュー]ボタンを押しましょう。
プレビューモードがONになったら、タグが配信されて欲しいページをブラウザの別のタブで開きます。GTMのデバッグペインが表示されます。
notion image
ここで確認すべきは、次の3つです。
  1. GTMのデバッグペインの[Tags Fired On This Page]に、作成したタグが表示されていること
  1. ブラウザのデベロッパーツールのコンソールに "[GTMテスト]ページ上の要素を消してみる" と出力されていること
  1. ページ上の消したい要素が削除されていること
1が表示されていない場合は、ページにGTMのタグが設置されていないか、プレビューモードがONになっていない可能性があります。
2が出力されていない場合は、タグのHTMLやJavaScriptの記述を見直してみましょう。
3がうまくいっていない場合は、CSSセレクタが合っているか確認することをおすすめします。
全て確認できれば、今回のチュートリアルでやりたかったことは成功です、お疲れ様でした!
なお、タグが実際に公開されてしまうと、全てのユーザーに対してタグが実行されてしまう恐れがあります。テスト用のタグであれば、ワークスペースから削除しておきましょう。

ページ上の要素が消えるまでのフローを簡単に理解する

最後に、ページ上の要素が消えるまでの処理の流れを図で理解しましょう。
notion image
ブラウザからGTMサーバーへのリクエストには、Page Pathなどのページ閲覧情報が含まれています。GTMサーバーは、その内容をもとに発火されるトリガーを検索し、条件に合致するトリガーがあればそれに紐付くタグを配信します。今回作成したタグの内容は、カスタムHTMLの中にページ上の要素を消すJavaScriptを書いたものでした。配信されたタグがページ上でJavaScriptとして無事に実行されると、意図した通りにページ上の要素が削除されるというわけです。