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

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

「JavaScriptプログラミングで自由にタグマネージャを操る」タグマネージャの最終兵器
書籍の5-6<カスタムJavaScript>より(このコーナーでは、電子書籍『実践 Googleタグマネージャ入門』の内容の一部を、Web担の読者向けに特別にお届けしています)

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

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

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

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

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

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

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

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

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

カスタムJavaScriptのサンプル

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

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

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

function(){ return document.title; }
「document.title」でページタイトルを取得するシンプルなJavaScript。

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

function(){ var gtmDOMmacroNullCheck = {{変数名}}; // チェックしたいDOM要素変数の名称を入れる if(gtmDOMmacroNullCheck == 'null') gtmDOMmacroNullCheck = null; return gtmDOMmacroNullCheck; }
DOM要素変数で指定したidの要素がWebページから見つからなかったとき、通常であれば「文字列」としての「null」が取得されるが、文字列ではなく「値が存在しない」という「予約語」としての「null」にしたい場合は、カスタムJavaScriptを利用する。

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

function(){ // ---- 初期化 var nowUrl = Page Path変数; // 【変数のタイプ:URL】【コンポーネントのタイプ:パス】の変数を読み込み var searchWord = '/hogehoge'; // 検索したいディレクトリ名をセット var tempStartPos = nowUrl.indexOf(searchWord) + searchWord.length; // searchWordの位置 var tempEndPos = nowUrl.lastIndexOf('/') + 1; // 最後の/の位置 // ---- 値の取得 return nowUrl.substring(tempStartPos, tempEndPos); // '/hogehoge/XXXXX/YYYYY/ZZZZZ.html'というパスの場合、'/XXXXX/YYYYY/'が取得されます。 }
Page Path変数の変数から、searchWordで指定したディレクトリ名を除去して、そこから最後の「/」までのディレクトリ名を返すJavaScript。このようにほかの変数の値を加工したり必要な部分だけを抜き出したりすることもできる。

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

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

この記事は、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担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]