カスタムJavaScriptを書いて学んだこと

概要

はじめまして、今年６月からistyleの仲間入りをしました杉本です。
GoogleTagManagerやGoogleAnalytics4初心者、そして言語についても絶賛勉強中の超初心者目線でブログを書いていきたいと思います。

まずはじめに

GoogleTagManager（以降、GTM）のカスタムJavaScript（以降、カスタムJS）とは？

任意の設定で定義する変数というものがいくつか存在するうちのひとつで、JavaScript処理を行い、その結果を取得するものとなります。

使い方

カスタムJSは値を返す匿名関数の形式をとる必要があるので、JavaScriptの記述は必ず「function () {」で始まり「}」で終わる形にして、「return 〇〇」という形で返す必要があります。

例）100という値を返したいとき

function() {
 return 100;
 }

活用例

例）あるページにてどのナビゲーションボタンをクリックしたのかを取得する変数

function() {
 var gtmClickUrl = {{Click URL}};

 if (gtmClickUrl.includes('category_all.php')) { 
  return 'category';
 } else if (gtmClickUrl.includes('brand/list.php')) {
  return 'brand';
 } else {;} 
}

▲上記のコードは、
(‘ ’)で囲まれた文字列を含んだURLをクリックした場合、’ ’で囲まれた値を返すという内容になっています。

２行目の var gtmClickUrl = {{Click URL}}についてはクリックしたURLを指しているのですが、他にも閲覧したページを{{Page URL}}、クリックしたテキストを{{Click Text}}というように組み込み変数（あらかじめGTM上で登録してある変数）を利用して簡単に定義することができます。

上記のカスタムJSを書いた変数を下記のようにGTMでイベントパラメータの値として設定することで、returnで返ってきた値をイベントパラメータ値として取得することができます。

気を付ける点

私がカスタムJSを書くうえで特にレビューで指摘をいただいた点をまとめました。

①変数名のつけ方
　・読み手が誤解しない名前を付けよう
　・変数名に情報を入れ込もう
　　例）
　　　限界値　→　max min
　　　範囲指定　→　first last / bigin end
　　　論理値　→　is has can shoud

②コードが冗長になってしまう
　・DRY原則（同じロジックを複数箇所に書かない）を意識しよう

どの言語でも言えることかもしれませんが、以上が初心者なりの気を付けるべきポイントでした。

これからもたくさんのコードを書き知識を増やしていって、ブログの内容も充実させていきたいと思います！