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タグ内に記述することで、タグから別のタグを呼び出すといった使い方もできたりします。トリッキーに見えて意外と使い道があるテクニックなので、頭の片隅で覚えておくといつか役立つことがあるかもしれません。
JavaScriptに不慣れな場合は、設定したはずなのにうまく動かないこともあるかもしれません。そういったときは、以下の点を確認してみてください。
- 記述した値とトリガーで設定した値が間違っていないか
- 追記したJavaScriptの記述部分がきちんと処理が行われているか
「GoogleタグマネージャはEvent変数の値が変わるたびに呼び出される」と説明しましたが、何もしなくてもページの読み込み時にタグが配信されていますよね。これは、実はページ読み込み時にもEvent変数の値が変わっているからなのです。デフォルトで、Event変数の値が変わるタイミングは3回あります。これは、トリガーの設定画面の一番下の「トリガーのタイプ」プルダウンメニューから選択できます。
- ページビュー（gtm.js）―― ページが読み込まれたタイミング
- DOM Ready（gtm.dom）―― ページ内のDOMが読み込まれたタイミング
- ウィンドウの読み込み（gtm.load）―― ページの読み込みが終わったタイミング
特に何も設定していないデフォルトの状態では、タグを少しでも早く配信して処理を完了させるために「ページビュー」のタイミングで処理されます。しかし、まだ「ページビュー」の段階ではページ内の読み込みが完了していない可能性もあります。そのため、例えばページ内の要素を変数で取得して条件に利用しているトリガーなどでは要素が見つからずにエラーとなり、タグが正しく配信されないこともあります。そうした場合は、「DOM Ready」や「ウィンドウの読み込み」のどちらかを選択するといいでしょう。
5-6で解説する「カスタムJavaScript」は、自分で自由にJavaScriptを入力できる変数です。しかし、カスタムJavaScript内では「dataLayer.push」の記述を使ってもEvent変数などの値を書き換えることができません。これは、タグの配信途中にマクロの値などが変更されてしまうと、同じタイミングに配信したはずのタグの値が異なる危険があるためです。
実は、以前はカスタムJavaScriptでEvent変数などほかの値を書き換えることができたのですが、現在では上記の理由でできなくなりました。もしほかの変数の値を書き換えたい場合は、カスタムJavaScript変数ではなく3-9のカスタムHTMLタグを使う必要があります。
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：フォーム入力時や送信前などにタグを動かす、タグマネ用「Event変数」の基本（全20回の14） | 実践 Googleタグマネージャ入門 | Web担当者Forum
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.
畑岡大作（はたおかだいさく）
アユダンテ株式会社、マークアップエンジニア。モバイルサイトの運営アシスタントからパソコン向けWebサイトの運営・制作までを経て、2008年よりアユダンテ株式会社に入社。現在はHTML+CSSのマークアップエンジニアとして、SEOコンサルティングの一環であるHTMLテンプレート作成、および自社サイトの運営から制作まで携わるほか、Googleタグマネージャの導入支援や設定サポートなどにかかわる。