カスタムJavaScriptで自在に値を加工するタグマネージャの最終兵器（全20回の20）

JavaScriptが書ければさまざまなことができる

これまでは、Webページの内容を「カスタムJavaScript」を利用して取得するのはおすすめできないと述べてきました。Webページの内容や構成が変わると、意図通りに動かなくなってしまう可能性があるからです。しかし、それ以外の用途なら、カスタムJavaScriptを有効に活用することもできます。特に、自身や周りの人がJavaScriptに詳しい場合は、自分でJavaScriptを書くことで、例えば簡単な計算や変数同士の値の結合など、さまざまなことが実現できるようになります。最後に、「カスタムJavaScript」について解説します。

●JavaScriptで値を取得したくなる状況の例

• ルックアップテーブル変数では対応しきれない複雑な条件分岐
• クリックしたリンク先URLのうち、全文ではなく最後のディレクトリ名だけを抜き出したい
• Webページ内の特定の箇所から情報を抜き出したい

このような状況は、難易度の差異はあってもJavaScriptが書ける人であれば解決できる事柄です。こうしたときに任意のJavaScriptを書いて値を取得したり算出したりして使うのが「カスタムJavaScript」という変数です。

カスタムJavaScriptは、その名の通りオリジナルのJavaScriptを使った処理を行いたい場合に利用します。カスタムという意味では、3-9で解説した「カスタムHTML」と同様で、使い方もほぼ一緒です。変数の新規登録画面で「変数の選択」で「カスタムJavaScript」を選択すると「カスタムJavaScript」と書かれたフリーフォームが表示されます。ここにJavaScriptのコードを入力します。

「変数の選択」で「カスタムJavaScript」を選択してフォームに自由に入力する。前後の<script>は不要だ。

カスタムHTMLとの違いは、カスタムJavaScriptはタグではなく変数なので、最終的に必ず値を返す必要があります。具体的には、フォームに入力するJavaScriptのコードは必ず「function(){」で始まり、「}」で終わる形に関数としてまとめて、その中のどこかで「return 値」のような形で値を返すJavaScriptでなければなりません。

カスタムHTMLと同様、カスタムJavaScript内でも「{{変数名}}」と記述すればほかの変数の値を利用することができます。なお、カスタムJavaScript内でほかの変数を利用する際は、クォーテーション（「''」や「""」）で変数名を囲むとエラーになるので、囲まないように注意してください。

カスタムJavaScriptのサンプル

カスタムJavaScriptでは、複雑な処理からシンプルな処理まで、利用方法は本当に多岐にわたります。大がかりなJavaScriptでWebページ内から情報を探し出すこともできれば、逆にページのタイトルなどのJavaScriptを使えば簡単に参照できる情報を手軽に取得することもできます。また、ほかの変数がそのままだと使いづらい場合に使いやすい形に整えたりするのも、よくある使い方です。

せっかくなので、手軽に利用できるJavaScriptをサンプルとして紹介します。そのまま実際に使ってもよし、「こういう使い方ができるのか」という参考として見ていただくもよし。ご自由にお使いください。

●サンプル1） Webページのタイトルを取得するカスタムJavaScript

●サンプル2） DOM要素変数の値が空だった場合にnullを返すカスタムJavaScript

●サンプル3） URLパスから特定のディレクトリ名を除去するカスタムJavaScript

カスタムJavaScript変数は、JavaScriptをゴリゴリと利用したい人向けの変数です。そのためJavaScriptの知識やスキルがなければ使いこなすことはできませんが、使いこなせばその応用範囲は計り知れません。

JavaScriptがよくわからない人は、ほかの種類の変数で目的を果たせないかを検討してみて、適切な変数の種類が見つからなかった場合に最後の手段として使うことになると思います。そのときは、JavaScriptを熟知した開発担当の人などに相談してみることをおすすめします。