実践Googleタグマネージャ入門 実践 Googleタグマネージャ入門

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

ページ読み込み時ではない別のタイミングで特定のタグを有効にするには
書籍の4-7<Event変数>より(このコーナーでは、電子書籍『実践 Googleタグマネージャ入門』の内容の一部を、Web担の読者向けに特別にお届けしています)

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の例

<script> dataLayer.push({'event': 'abcdefg'}); </script>

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

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

v20407a
トリガーの新規登録画面で「カスタムイベント」選択し、目的の値を入力する。
v20407b
わかりやすいトリガー名を入力して「トリガーを保存」をクリックする。

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

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

うまく動作しない場合は

JavaScriptに不慣れな場合は、設定したはずなのにうまく動かないこともあるかもしれません。そういったときは、以下の点を確認してみてください。

  1. 記述した値とトリガーで設定した値が間違っていないか
  2. 追記したJavaScriptの記述部分がきちんと処理が行われているか
標準のページビューにも3種類の値がある

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

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

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

カスタムJavaScriptでは変数の値を書き換えられない

5-6で解説する「カスタムJavaScript」は、自分で自由にJavaScriptを入力できる変数です。しかし、カスタムJavaScript内では「dataLayer.push」の記述を使ってもEvent変数などの値を書き換えることができません。これは、タグの配信途中にマクロの値などが変更されてしまうと、同じタイミングに配信したはずのタグの値が異なる危険があるためです。

実は、以前はカスタムJavaScriptでEvent変数などほかの値を書き換えることができたのですが、現在では上記の理由でできなくなりました。もしほかの変数の値を書き換えたい場合は、カスタムJavaScript変数ではなく3-9のカスタムHTMLタグを使う必要があります。

この記事は、Googleタグマネージャの初心者向け入門本となる電子書籍『実践 Googleタグマネージャ入門』の一部をWeb担の読者向けに特別公開しているものです。

実践 Googleタグマネージャ入門
時間を「劇的」に生み出すサイト修正不要のタグ管理術

本書は「Googleタグマネージャ」を解説する国内初の書籍です。Googleタグマネージャ認定パートナーのアユダンテ株式会社が、基礎知識から実際の設定方法までをていねいに解説。仕組みや基本的な考え方を理解できるよう、ひと通りの機能を網羅します。

2014年10月にリニューアルされた新インターフェースに完全対応。アクセス解析、リスティング広告、リマーケティングタグなどを日々扱うWeb担当者の方、またはWebサイトを管理しているシステム担当者の方に「今」おすすめの一冊です。

電子書籍『実践 Googleタグマネージャ入門』の中身や購入についてもっと見る
  • 実践 Googleタグマネージャ入門 時間を「劇的」に生み出すサイト修正不要のタグ管理術
  • 品種:電子書籍(リフロー形式/4.39MB)
  • 著者:畑岡大作(アユダンテ株式会社)著
  • 電子基準価格:1,000円+税(販売価格はストアにより異なる場合があります)
  • 発行:インプレス
  • 発売日:2014年11月10日
  • ページ数:160ページ
  • 書籍内容&販売サイト紹介
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]