カスタムJavaScript変数とは？ GTMの標準機能で取れないデータを取得する方法

Googleタグマネージャーを使っても、思うようにデータが取れない…。

この記事は、そんなお悩みをお持ちの方に向けた記事です。

この記事を読んでいる方なら、すでにGoogleタグマネージャー（GTM）を使いこなし、バナークリックの計測など何の不自由もなく設定できることでしょう。

ですが、実際に計測してみたデータを見ると、リンク先のURLではなく「.jpg」や「.png」といった画像のURLが取れてしまう。そんな壁にぶつかることはないでしょうか。

他にも、先ほどとは逆に「画像のURLをレポートしたいのに取得できない」とか「入れ子構造になっているタグからIDを取得したい」とか、既存の組み込み変数では対処できないケースに遭遇することもあると思います。

この記事のメインテーマである「カスタムJavaScript変数」を使うことで、前述のような「痒いところに手が届かない…」を解決できます。

カスタムJavaScript変数はGTMで使える「ユーザー定義変数」の一種です。JavaScriptというプログラム言語を使って、ページ上のあらゆる情報を自由に取得できる柔軟性の高さが特徴です。「Click URL」や「Click Text」など、Googleタグマネージャーの組み込み変数では取得できないような細かい情報も、条件に応じて正確に拾ってくることができます。

「JavaScript」と聞いて、「プログラミングはちょっと…」と尻込みする方も多いかもしれません。実際、簡単ではありません。

ですが、カスタムJavaScript変数を使える人にだけ取れるデータもあります。「データが取れない」といつまでも悩んでいるくらいなら、多少難しくてもチャレンジしておくと後々楽になります。

この記事では、まず実際に動くカスタムJavaScript変数を実装し、それをGoogleタグマネージャー上で動かす手順を紹介します。その後で、使ったコードを元にJavaScriptの基本構文について解説します。

もちろん、カスタムJavaScript変数で「できること」は無限大にありますし、コードの書き方も人それぞれです。すべてを解説し切ることはできません。この記事でカスタムJavaScript変数の「可能性」に触れてもらい、あなたの計測の引き出しを増やすヒントとなれば嬉しいです。

カスタムJavaScript変数とは

まずはじめに、カスタムJavaScript変数がどのようなものか、基本概念について軽く知っておきましょう。

カスタムJavaScript変数とは、Googleタグマネージャーの「変数」の1つです。

変数というのは、データを一時的に入れておくための「箱」のようなものだとイメージしてください。ユーザーがクリックした場所のテキストやURLなどの変化する要素をWebページから受け取り、Googleアナリティクスなどのタグに渡したり、トリガーを動かしたりする役割を担います。

この変数には、GTMに標準で備わっている「組み込み変数」と、利用者自身がカスタマイズして使える「ユーザー定義変数」があります。カスタムJavaScript変数は、この「ユーザー定義変数」の中でも特に自由度が高く「困ったときの最終手段」とも言える存在です。その名前の通り、JavaScriptというプログラミング言語を使い、Webページ上の情報を柔軟に取得します。

なぜ組み込み変数では不十分なのか

「JavaScriptを使って情報を柔軟に取る」と言われてもピンとこないかもしれませんので、バナーをクリックした時のURLを取得する場面で見てみましょう。以下の図をご覧ください。

標準の「Click URL」は、「クリックされた場所のURL」を取得する変数です。上記のようなHTML構造の場合、多くのユーザーはバナー画像の部分をクリックします。この時、組み込み変数の「Click URL」は画像に設定されたsrc属性を優先的に取得します。

本来取得したいaタグのhref属性が取れるのは、バナーの枠の部分がクリックされたときだけです。

これが、組み込み変数の「Click URL」で思い通りに計測できない原因です。

カスタムJavaScript変数が有効な理由

カスタムJavaScript変数を使うと、以下のようにクリックされた要素がaタグかどうかを判定し、条件に当てはまらなければ親要素に遡って検索をしてくれます。

クリックした場所の親要素にaタグが存在すれば、そのhref属性を取得するというわけです。たとえ、すぐ上の階層にaタグが見つからない場合にも、目的のものが見つかるまで探し続けます。

このような、「判定する」とか「見つかるまで探す」といった柔軟な動きをできるのがカスタムJavaScript変数の最大の魅力です。

これはあくまでも一例ですが、こうした「柔軟性」を活かして、さまざまな詳細データを取得できます。できることは工夫次第で無限大なので、使う側の発想力が試されます。

もちろん、自由度が高い分、ある程度のJavaScriptの理解が必要です。「書いてあることが何となくわかる」程度で良いので、最低限の構文も覚えておくと応用が効きます。

この記事では「まずは動くものを作ってみる」ことを優先し、少しずつ構文の意味を紐解いていきます。

カスタムJavaScript変数の実装方法

ここでは例として、冒頭で取り上げた「バナーリンクの正しいURL」をカスタムJavaScript変数を使って取得してみましょう。

なお、バナークリックイベントはすでに設定してあるものとして進めます。クリックイベント自体の設定方法は、以下の記事をご覧ください。

以下の手順で実装してみてください。

STEP

ユーザー定義変数を新規作成する

GTMのサイドメニューから「変数」をクリックし、「ユーザー定義変数」の「新規」ボタンを押します。

STEP

カスタムJavaScript変数を選択する

変数タイプの選択画面で「カスタムJavaScript」を選びます。

STEP

JavaScriptを入力する

入力欄に以下のスクリプトを貼り付けて保存します。

function() {
  try {
    var element = {{Click Element}};

    if (element) {
      var anchor_element = element.closest('a');
      if (anchor_element) {
        return anchor_element.href;
      }
    }
    return null;

  } catch (error) {
    return null;
  }
}

上記はクリックされた場所の親要素までたどり、URLを取得するプログラムです。

変数名にはわかりやすい名前をつけておきましょう。

STEP

タグに変数を設定する

タグの中のURLを受け取るパラメータ（以下の例では「click_url」）に前のステップで作成したカスタムJavaScript変数を設定します。

このタグをプレビューすると、以下のように「get_anchor_link」変数にリンク先URLが格納されることがわかります。

これをタグ上で「click_url」のパラメータに渡すことで、以下のようにレポート上でもリンク先URLを表示することができます。

設定した「click_url」のパラメータは、GA4側でカスタムディメンションに登録しなければその他のレポートで表示することができませんのでご注意ください。カスタムディメンションについて詳しくは、以下の記事をご覧ください。

JavaScriptの構文解説

前のセクションで紹介したカスタムJavaScript変数のコードは、そのままコピペで使えますが基本構文を理解することで、応用力がぐっと高まります。

今回使ったコードを構成するJavaScriptの中で使っている要素について解説します。

変数とは「データの入れ物」

JavaScriptの「変数」は、データを一時的に保管するための箱のようなものです。

前のセクションで使ったコードでは、次のように変数を使っています。

var element = {{Click Element}};

これは、「{{Click Element}}で取得できるクリック要素を、elementという変数に入れる」という意味です。

この「var」は、「これから変数を宣言しますよ」というおまじないのようなものだと理解しておいてください。

補足：カスタムJavaScript変数はES6未対応

JavaScriptを多少学んだことがある方は、「変数の宣言はvarじゃなくてletでは？」と思われるかもしれません。

実はカスタムJavaScript変数は最新のJavaScript（ES6）に対応しておらず、変数の宣言にはいまだに「var」を使います。

「let」や「const」など、ES6から登場した構文の多くは使えないので注意しましょう。対応していない構文を使った場合、以下のようにエラーが発生します。

This language feature is only supported for ECMASCRIPT_2015 mode or better: let declaration.（この言語機能は、ECMASCRIPT_2015 モード以上でのみサポートされます）

オブジェクト

JavaScriptでは、HTML上のあらゆる要素は「オブジェクト」として扱われます。

オブジェクトは理解しづらい概念ですが、「関連する情報（プロパティ）と操作（メソッド）をひとまとめにしたもの」と考えるとわかりやすいかもしれません。

Webサイト上のあらゆる要素（ボタン、画像、リンクなど）は、JavaScriptでは「オブジェクト」として扱われます。

例えば、最初に宣言している変数「element」の中に格納された「Click Element」（クリックされたHTML要素）もオブジェクトです。

var element = {{Click Element}};

この中には、「href属性」のようなプロパティ（情報）と、「親要素を遡って検索する」といったメソッド（操作）が含まれています。

メソッド

メソッドは、オブジェクトに対して実行できる「操作」です。

例えば、次の「closest()」というメソッドでは、オブジェクト（element）に対して「親要素を遡って検索する」という操作を実行しています。

element.closest('a')

丸括弧に検索したい値を入力して使います。上記の例では、「element自体、またはその親要素をたどって、最初に見つかったAタグを返してください」という意味になります。

プロパティ

プロパティは、オブジェクトが持つ「情報」のことです。

例えば以下の例では、「anchor_element」が持つ「href属性」（URL）を取り出しています。

anchor_element.href

プロパティはhrefの他にも「textContent（タグ内のテキスト）」や「id（タグのID）」、「alt（画像のalt属性）」など取りたいデータに応じて使い分けます。

プログラム全体を通して、以下のような流れでオブジェクトへの処理を行っています。

関数は「処理のまとまり」

カスタムJavaScript変数全体を囲む「function」は、「関数（無名関数）」と呼ばれるものです。

function() {
  // プログラムの本体
}

{}（波括弧）の中にプログラムの本体を記述します。

関数というのは「処理のまとまり」のことです。身の回りのものに例えると、「スイッチ」のようなものだと考えると理解しやすいと思います。

「スイッチをつけると電灯が点く」のと同じように、関数を実行すると「親要素のAタグを取得する」という感じです。

GTMのカスタムJavaScript変数は、必ず関数（無名関数）の形式で記述する必要があります。

関数には「function 関数名()」のように名前をつけるのが一般的ですが、GTMでは関数名を持たない「無名関数」として書くことが推奨されています。無名関数とすることで、Webサイト上の他のスクリプトとの干渉を防ぎ、安全に処理を実行することができます。

カスタム JavaScript は、値を返す匿名関数の形式をとる必要があります。

タグマネージャーヘルプ

※匿名関数＝無名関数

エラー処理（try-catch）は「保険」

JavaScriptのコードは、想定外のエラーで途中で止まってしまうことがあります。それを避けるために使うのが 「try { … } catch (error) { … } 」というエラー処理の構文です。

エラーが起きても「null（何もない）を返す」という処理に切り替わるので、計測タグ全体が止まってしまうことを防げます。

今回使ったようなシンプルな処理ならエラーが起こることはほぼありませんが、「保険」的な意味合いで実装しておくと安心です。

構文の理解は一朝一夕には難しいと思いますが、実際にJavaScriptを記述する際には生成AIを活用することもできます。近年流行っている「バイブコーディング」の要領で、ChatGPTやGeminiなどに「計測したい内容」を伝えることで、カスタムJavaScript変数を簡単に作ることが可能です。

基礎的な構文を覚えた上でトライしてみてください。

カスタムJavaScript変数の活用シーン

カスタムJavaScript変数を実務でどのように活用しているのか、私が実装しているものを例に紹介します。

バナー画像のURLを取得する

前述の例とは逆に、画像（imgタグ）のリンク（src属性）を取得する場合にもカスタムJavaScriptは有効です。

「Click URL」の組み込み変数で取れているので良いのでは？と思われるかもしれませんが、これはあくまでも偶然取れているに過ぎません。実際には、画像の外枠がクリックされた場合など、画像自体のURLが取得できないことも多々あります。

そうした場合に、偶然ではなく狙い通りにデータを取るには、カスタムJavaScript変数に頼るしかありません。

取得した画像URLは、Looker Studioを活用することで、以下のような画像付きレポートに仕上げることも可能です。

CTAのIDを動的に取得する

GTMでクリックイベントを実装する機会の多い方は、「CTAが増えるたびにGTM上にタグが増えていく…」という悩みを抱えていないでしょうか。

これも、カスタムJavaScript変数を活用することで解消できます。

以下は、カスタムJavaScript変数を使って、CTA関連のイベントをまとめた例です。

「CTAクリック」と「CTA表示」の2つのタグで、サイト内のほとんどのCTAを計測できます。

これを実現するには、サイト側で「計測したい箇所に予め決まった値を含むIDを付ける」という一工夫が必要です。私のサイトの場合には、「cta_」から始まるIDを付けるというルールにしています。

この「cta_」の部分を、カスタムJavaScript変数を使って読み取り、設定不要で自動的にイベントパラメータに格納されるようにしているというわけです。

このイベントを実装してから、サイト側にCTAを追加した場合にもGTM側で作業をすることなく計測することができています。IDを付与する場合、後で「どこがクリックされたのか」を判別できるよう、命名規則にだけは気を配るようにしましょう。以下の記事を参考にしてください。

プラグインやWordPressテーマの機能で追加される要素にはIDを付与できない場合もあります。そうした要素には、個別に手作業での設定作業が必要です。

記事の精読を取得する

「ユーザーが記事をしっかり読んだかどうか」を判定するための「精読」の計測も、カスタムJavaScript変数を使って実現できます。

「精読」を判定するには、文字数に応じて「記事ごとの判定基準」を設ける必要があります。こうした「記事ごとに違うもの」といった、「変化する要素」が出てきた時にはJavaScriptの出番です。

カスタムJavaScript変数を使って記事内の文字数をカウントし精読時間を算出することで、記事ごとの「想定読了時間」を算出できます。

さらに、記事を最後まで読んだ「読了」を組み合わせることで、「精読」を判定することができます。読了イベントのみを設定する方法は以下の記事で解説しています。

もちろん、それらの条件が満たされたからといって、本当にユーザーが記事を精読したかはわかりません。あくまでも傾向値の比較をするための基準です。こうした値は、単体で見るというよりは、他の記事との相対的な比較をするのが基本となります。

ここで紹介したカスタムJavaScript変数の具体的な実装方法については、記事で書くには限界があります。以下のUdemyコースをご覧ください。

よくある質問（FAQ）

カスタムJavaScript変数について、よくある質問をまとめました。

まとめ

カスタムJavaScript変数は、Googleタグマネージャーの中でも地味で目立たない要素です。存在すら知らない方も多いのではないでしょうか。

ですが、1つとして同じものが存在しないWebサイトの計測では、「このデータだけ、どうしても取れない…」という場面に必ず遭遇します。そんなときにカスタムJavaScript変数が使えると、一目置かれる存在になれるはずです。

JavaScriptの知識が必要なので、すぐに使いこなすのは難しいかもしれません。ですが、大事なのは、「こういうことができる」という引き出しを持っていて、困ったときに思い出せるということです。

Googleタグマネージャーを「ちゃんと」使える人は、まだまだ市場にも少ないのが現状です。私も仕事柄、Webマーケティングに携わる方と話す機会が多いですが、ほとんどの方が「GTMは難しい」と口を揃えて言います。

そんな中で、カスタムJavaScript変数をはじめとしたGTMの変数を理解して使いこなせる人は本当に希少です（私自身もまだまだ道半ばです）。確かに難しいですが、カスタムJavaScript変数という選択肢を持っておくことが、あなたの市場価値を大きく引き上げてくれることでしょう。

この記事で紹介したカスタムJavaScript変数については、以下のUdemyコースで解説しています。スキルをマスターして市場価値を上げたいチャレンジ精神旺盛な方は、ぜひ受講してみてください。