.setAttribute()

JavaScriptの.setAttribute()で全てのaタグにGoogleAnalyticsのイベントトラッキングを付与[gtag.js編]

2022年4月5日2022年4月9日 4分

直接 a タグに、HTMLでイベントトラッキングのコードを書いても何ら問題ありませんが、対象になる a タグの数が多い場合非常に面倒なので、そんな時に使えるスニペットを作りました。

かかかず

この記事は「gtag.js」でのスニペットなのでご注意ください。

Google Analyticsのイベントトラッキング
- gtag.jsの場合
- analytics.jsの場合
イベントトラッキングを付与したサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

Google Analyticsのイベントトラッキング

Google Analyticsのイベントトラッキングを設置する際はに注意が必要で、<head>〜</head>の中に設置したときのタグによって、追記するコードが異なります。

タグは以下の2種類です。

gtag.js
analytics.js

この2種類のコードが使われていますが、ざっくり言うとgtag.js が新しい仕様、analytics.js が古い仕様のGoogle Analyticsです。

かかかず

現在、Google Analyticsを導入しようとすると gtag.js のコードが表示されます。

以下はHTMLで設置する場合のコードです。

gtag.jsの場合

<a href="" onclick="gtag('event', 'Click', {'event_category': 'link', 'event_label': 'イベントの名前', 'value': '0'});">テストのイベント</a>

analytics.jsの場合

<a href="" onclick="ga('send','event','banner','link','イベントの名前',1);">サンプルのリンク</a>

かかかず

onclickの中の記述が多少異なるので、注意しましょう。

イベントトラッキングを付与したサンプル

早速サンプルのコードです。

クリックしても当サイトのGoogle Analyticsに連動している為、管理画面が見れません。

サンプルとして、上記リンクをクリックした後、Google Analyticsの「リアルタイム＞イベント」で見ると、以下のようにイベントトラッキング「link0 〜 link3」まで、それぞれ計測されます。

かかかず

このように、イベントが数値として計上されるようになります。

実装の手順と方法

スニペットのご紹介の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

a タグが含まれるHTMLを設置したいページに記述します。a タグが既にあるページであれば、別途設置する必要はありません。

コードを表示

<ul class="linkList">
<li><a href="">テスト1 [link0]</a></li>
<li><a href="">テスト2 [link1]</a></li>
<li><a href="">テスト3 [link2]</a></li>
<li><a href="">テスト4 [link3]</a></li>
</ul>

JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

const hrefLink = document.querySelectorAll('.linkList li a');
window.addEventListener("DOMContentLoaded", () => {
  for (i = 0; i < hrefLink.length; i++) {
const gtagLink = "gtag('event', 'Click', {'event_category': 'link" + [i] + "', 'event_label': 'イベントの名前', 'value': '0'});"
hrefLink[i].setAttribute('onclick', gtagLink);
}
});

かかかず

コードは外部ファイル化して、読み込ませる形でもOKです。

対象にしたい a タグの指定は冒頭の「const hrefLink〜〜」で指定します。サンプルでは、要素がclass名「.linkList」を持つ ul タグの中の a タグを対象にしています。

ざっくりとしたコードの解説

コードはHTMLとJavaScriptの2種で、CSSは特に使わないスニペットなので割愛させてください。

HTML

HTMLは以下のように、なんの変哲も無い a タグを4つです。

<ul class="linkList">
<li><a href="">テスト1 [link0]</a></li>
<li><a href="">テスト2 [link1]</a></li>
<li><a href="">テスト3 [link2]</a></li>
<li><a href="">テスト4 [link3]</a></li>
</ul>

かかかず

この a タグ全てに、JavaScriptでイベントトラッキングをつけます。

JavaScript

JavaScriptでは、.querySelectorAll() で所定の a タグを全て取得して、その a タグに「onclick」属性をループで付与させます。

const hrefLink = document.querySelectorAll('.linkList li a');
window.addEventListener("DOMContentLoaded", () => {
  for (i = 0; i < hrefLink.length; i++) {
const gtagLink = "gtag('event', 'Click', {'event_category': 'link" + [i] + "', 'event_label': 'イベントの名前', 'value': '0'});"
hrefLink[i].setAttribute('onclick', gtagLink);
}
});

そのループの中に、「gtagLink」の関数宣言の中で使うパラメータを設定します。そして、「event_category」の名称の後に連番の番号が着くよう [i] をつけ、それを a タグに記述するようにしています。