フォーム入力時や送信前などにタグを動かす、タグマネ用「Event変数」の基本（全20回の14）

Googleタグマネージャを呼び出すための「Event」変数

Googleタグマネージャの基本は、これまで解説してきたように「URLが○○のとき」のように、該当するページの読み込み時にタグを配信するトリガーです。ただ、「ページが読み込まれた瞬間」ではなく任意のタイミングでタグを配信したい場合もあるかと思います。例えば、フォームの入力チェックを行っているJavaScriptなど、特定のJavaScriptが処理を行っている最中や完了した後にタグを配信したいといった場合ですね。そうしたトリガーは、「Event」変数を使って作成が可能です。

Event変数は最初から利用可能な変数の1つで、ほかの変数とは異なり少々特殊な特徴を持っています。Event変数はGoogleタグマネージャを呼び出す際に使用する変数で、Event変数の値が変わるたびにGoogleタグマネージャが呼び出されます。実をいえば、標準の「ページが読み込まれたとき」というのもEvent変数の値が変わるタイミングの一種です。Event変数はGoogleタグマネージャの動作にとって非常に重要なもので、そのため、削除してはいけない貴重品です。

Event変数の値を書き換えるJavaScriptを追加する

この仕組みを利用することで、任意のタイミングでGoogleタグマネージャを呼び出して、それにひもづくタグを配信することができます。具体的には、Googleタグマネージャを呼び出したいタイミングでJavaScriptを使ってEvent変数の値を書き換え、それを感知したGoogleタグマネージャが呼び出されてトリガーに従ってタグを配信する、という流れになります。

GoogleタグマネージャはJavaScriptで動作するツールなので、JavaScriptから特定の変数へ値を渡すことができます。それを利用して、Event変数を書き換えることができるわけです。まずは、Googleタグマネージャを呼び出したいタイミングにEvent変数の値を書き換えるため、以下の記述を追記します。

●Event変数の値を変更するJavaScriptの例

上記は「Event変数の値を「abcdefg」に変更する」というJavaScriptになります。このJavaScriptが処理されると、Event変数の値が書き換わります。

続いて、この値を利用して「Event変数の値が『abcdefg』になったとき」というトリガーを新規作成します。「条件」でEvent変数を選択し、演算子に「等しい」、値に「abcdef」と入力して保存します。

トリガーの新規登録画面で「カスタムイベント」選択し、目的の値を入力する。

わかりやすいトリガー名を入力して「トリガーを保存」をクリックする。

これで、「Event変数の値が『abcdefg』になったとき」というトリガーを作成できました。あとは、このタイミングで配信したいタグにこのトリガーをひもづければ設定は完了です。

ちなみに、今回紹介した方法はJavaScriptが動作する環境であれば利用できるので、Googleタグマネージャに登録しているカスタムHTMLタグ内に記述することで、タグから別のタグを呼び出すといった使い方もできたりします。トリッキーに見えて意外と使い道があるテクニックなので、頭の片隅で覚えておくといつか役立つことがあるかもしれません。

標準のページビューにも3種類の値がある

「GoogleタグマネージャはEvent変数の値が変わるたびに呼び出される」と説明しましたが、何もしなくてもページの読み込み時にタグが配信されていますよね。これは、実はページ読み込み時にもEvent変数の値が変わっているからなのです。デフォルトで、Event変数の値が変わるタイミングは3回あります。これは、トリガーの設定画面の一番下の「トリガーのタイプ」プルダウンメニューから選択できます。

• ページビュー（gtm.js） ―― ページが読み込まれたタイミング
• DOM Ready（gtm.dom） ―― ページ内のDOMが読み込まれたタイミング
• ウィンドウの読み込み（gtm.load） ―― ページの読み込みが終わったタイミング

特に何も設定していないデフォルトの状態では、タグを少しでも早く配信して処理を完了させるために「ページビュー」のタイミングで処理されます。しかし、まだ「ページビュー」の段階ではページ内の読み込みが完了していない可能性もあります。そのため、例えばページ内の要素を変数で取得して条件に利用しているトリガーなどでは要素が見つからずにエラーとなり、タグが正しく配信されないこともあります。そうした場合は、「DOM Ready」や「ウィンドウの読み込み」のどちらかを選択するといいでしょう。