GTM（Google Tag Manager）を使っていると、「もっと柔軟にデータを扱いたい」「タグの発火条件をより細かく制御したい」と感じることはありませんか？
そんな時に役立つのが、カスタムJavaScriptの活用です。
GTMには標準で多数の変数やトリガーが用意されていますが、複雑な判定や独自のロジックを組みたい場合、JavaScriptによるカスタム変数を使うことで、GTMの可能性が大きく広がります。
この記事では、キーワード「GTM カスタムJavaScript」に焦点を当て、
- そもそもカスタムJavaScriptとは何か
- どのように設定・活用するのか
- 実務に直結する具体的なコード例（4選）
を初心者にも分かりやすく図解＆実例付きで解説していきます。
GTMのカスタムJavaScriptとは
GTMは、Webサイトにタグ（トラッキングコードやスクリプトなど）を管理・設置するための強力なツールです。GTMを使えば、サイト運営者やマーケターが直接コードをサイトに埋め込むことなく、タグを柔軟に管理できます。
そのGTMの中でも、特に高度な実装に使われるのが「カスタムJavaScript」機能です。この機能を使えば、GTMの変数やトリガーに対して任意のJavaScriptコードを記述し、細かい条件制御やデータ整形が可能になります。
カスタムJavaScriptの用途とは？
GTMのカスタムJavaScriptは、「ユーザー定義変数」として利用されます。特定の条件に基づいて値を返したり、データを整形してGA4（Googleアナリティクス4）や広告タグに送信したりといった用途に使えます。つまり、GTMの柔軟性を飛躍的に高めるテクニックと言えます。
例えば以下のような場面で活用されます。
- 特定のURL構造に基づいてカテゴリ名を抽出する
- DOMの要素からテキストを取得してイベントを発火
- CookieやlocalStorageから情報を取得し、条件分岐に使用
GTMのカスタムJavaScriptの具体例
ここからは、実務でよく使われるカスタムJavaScriptの具体例を3つご紹介します。実際のコードと共に、どのような目的で使うのか、設定方法はどうかといったポイントを解説していきます。
例①：URLからパラメータを取得して返す
特定のクエリパラメータ（例：utm_sourceなど）を取得し、それをGA4のカスタムディメンションとして送信したいときに使います。
コード例
function() {
var query = location.search.substring(1);
var params = query.split("&");
for (var i = 0; i < params.length; i++) {
var pair = params[i].split("=");
if (pair[0] === "utm_source") {
return decodeURIComponent(pair[1]);
}
}
return "not_set";
}
ポイント
- このスクリプトは、URLに含まれる
utm_sourceの値を取得して返します。 - 該当のクエリパラメータが存在しない場合は「not_set」を返します。
- GA4のイベントパラメータなどにセットすることで、流入元分析がより細かくなります。
例②：ページのタイトルに応じてカスタム分類する
ページタイトルに特定のキーワードが含まれているかを調べて、「カテゴリ」を自動で判定し、それを変数として使いたいケースです。
コード例
function() {
var title = document.title.toLowerCase();
if (title.indexOf("ブログ") > -1) {
return "blog";
} else if (title.indexOf("お問い合わせ") > -1) {
return "contact";
} else if (title.indexOf("商品") > -1) {
return "product";
} else {
return "other";
}
}
ポイント
- ページタイトルの中身に応じて「blog」「contact」「product」「other」のいずれかを返します。
- この変数は、GA4のカスタムディメンションやタグのトリガー条件としても使用可能です。
- 汎用性が高く、多くのサイトで応用できます。
例③：Cookieの値を読み取ってユーザータイプを判定
特定のCookie（例：user_type）を読み取り、その値によって「新規」「リピーター」などのユーザー属性をGTM上で判別したい場合に使います。
コード例
function() {
var name = "user_type=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "unknown";
}
ポイント
- Cookieの中にある
user_typeという名前の値を取得します。 - Cookieが存在しない場合は「unknown」を返します。
- Web接客ツールやパーソナライズ施策との連携にも便利です。
例④：スクロール率に応じて値を返す
ユーザーがページをどれだけスクロールしたかによって、イベントを発火させたい場合があります。GTMの「スクロールトリガー」でも一定の制御は可能ですが、より柔軟な制御や条件分岐を行いたい場合には、カスタムJavaScriptでスクロール率を判定する方法が便利です。
コード例：
function() {
var scrollDepth = window.scrollY + window.innerHeight;
var totalHeight = document.documentElement.scrollHeight;
if (scrollDepth / totalHeight >= 0.5) {
return "high";
} else if (scrollDepth > 0) {
return "low";
} else {
return "none";
}
}
ポイント：
scrollY + innerHeightで現在のスクロール位置を取得します。document.documentElement.scrollHeightでページ全体の高さを取得します。- この2つを使って、スクロール率を算出しています。
- 条件に応じて「high」「low」「none」を返すようになっており、これをGTM内のトリガーやタグ条件に活用できます。
まとめ
GTMのカスタムJavaScriptは、Google Tag Managerの可能性を大きく広げる強力なツールです。今回ご紹介したような使い方をマスターすれば、単なるタグ管理ツールとしてではなく、柔軟で動的なデータ処理を可能にするプラットフォームとして活用できます。
本記事のポイントをまとめます。
- カスタムJavaScriptは、GTMで「ユーザー定義変数」として設定可能。
- URLパラメータの取得、ページ内容の解析、Cookieの読取など、実用的な使い道が多い。
- GA4や広告タグと組み合わせることで、高精度なデータ計測とパーソナライズが可能になる。
- カスタム変数の使い方をしっかり設計すれば、業務の自動化・分析の高度化にも貢献する。
GTMの基本操作に慣れてきたら、ぜひこのカスタムJavaScriptを導入し、さらに一歩進んだマーケティング実装を目指しましょう。応用次第で可能性は無限です。
