- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-07-06T01:57:16+09:00;2021-07-05T20:37:56+09:00","default:tgoto","tgoto")
#author("2022-12-01T00:43:12+09:00;2021-07-05T20:37:56+09:00","default:tgoto","tgoto")
#ref(https://oncologynote.com/img/680303ba45.jpg)
''Google Analytics''を設置すると''Pagespeed Insight''のスコアが落ちてしまうので、Google Analyticsのスクリプトを遅延読み込み（lazyload）するようにしてスコア低下を回避します。lazysizes.jsやjQueryなどの他のライブラリを必要とせず、単体で動作します。
*解説 [#z0407df5]
具体的には、初回の''マウススクロール''か''マウス移動''で発火するJavaScriptを使ってGoogle Analyticsのタグを読み込みます。初回のマウススクロールかマウス移動が発生しないかぎりスクリプトファイルを読み込みませんので、Pagespeed Insightのスコアが低下しません。
欠点としては、スクリプト読み込みまでに至らなかった人は拾えない（つまりページを一切スクロールせず離脱した人の直帰率が反映されない）ことや、スクリプト読み込みの遅れによりセッション継続時間（サイト滞在時間）が実際より短く算出される可能性があることなどです。
*読み込みたいタグ [#gda32f1c]
Google Analyticsのサイトから取得できるトラッキングコードの''グローバルサイトタグ（gtag.js）''が下記のようなものだったとします。「UA-11111-01」のところには自分のトラッキングタグの情報が挿入されているはずです。
あるいは、新しいGoogle AnalyticsのタグシステムであるGA4に対応したアカウントの場合はIDが「G-12345ABCDE」のようなGから始まるトラッキングIDかもしれません。その場合は2ヶ所の「UA-11111-01」の代わりに「G-12345ABCDE」を当てはめてください。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-11111-01"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-11111-01');
</script>
*設置する遅延読み込みタグ [#zf1fd832]
下記のような形で初回のscrollかmousemoveのイベントが発生したらbodyの最下部にグローバルサイトタグ（gtag.js）を読み込んでいます。例によってUA-11111-01のところ（2箇所）には自分のトラッキングID（UA-11111-01またはG-12345ABCDEなど）を記入してください。このscriptをスキンのどこか（</body>の直前など）に書き込んでおきます。
<script>
function lazyAnalyticsScript() {
//スクリプトの読み込みが1回目であることを確認するため
var scrollFirstTime = 1;
//スクロールとマウス動作を検出
window.addEventListener("scroll", oneTimeFunction, false);
window.addEventListener("mousemove", oneTimeFunction, false);
function oneTimeFunction() {
if (scrollFirstTime === 1) {
//スクリプトの読み込みを1回限りにするため
scrollFirstTime = 0;
//1つ目のscriptタグの書き込みこみ
var adScript = document.createElement("script");
adScript.src = 'https://www.googletagmanager.com/gtag/js?id=UA-11111-01';
document.body.appendChild(adScript);
//2つめのscriptタグの書き込み
var adScript2 = document.createElement("script");
adScript2.innerHTML = 'window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag("js", new Date()); gtag("config", "UA-11111-01");';
document.body.appendChild(adScript2);
//念のためeventListenerを削除
window.removeEventListener("scroll", oneTimeFunction, false);
window.removeEventListener("mousemove", oneTimeFunction, false);
}
}
}
lazyAnalyticsScript();
</script>
あるいは、このテキストをanalytics.phpという名前のファイルにして保存し、スキンの</body>の直前に<?php include_once("analytics.php") ?>を設置してPHPでこのファイルを読み込みます。
空行やコメント行は適宜削除してもOKです。JavaScriptをもう少し洗練させればより短くきれいに書けると思いますが、ひとまずこれで運用しています。
* PR「確かな力が身につくJavaScript「超」入門 第2版」 [#q8b32107]
JavaScriptの入門書としては現在発売されているものでは下記の『「確かな力が身につくJavaScript「超」入門 第2版」』が一番わかりやすく優れていると思います。HTML・CSSなどを習得してJavaScriptも学び始めたいという人にはこの本をオススメします（すでにある程度の知識がある人には若干もの足りないかも知れない）。
#ogp(https://amzn.to/3htGMk8)
#description(Google Analyticsを設置するとPagespeed Insightのスコアが落ちてしまうので、Google Analyticsのスクリプトを遅延読み込み（lazyload）するようにしてスコア低下を回避します。)
#pcomment