- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-07-05T10:40:50+09:00;1970-01-01T18:00:00+09:00","default:tgoto","tgoto")
Google Analyticsを設置するとPagespeed Insightのスコアが落ちてしまうので、Google Analyticsのスクリプトを遅延読み込みするようにしてスコア低下を回避します。
#author("2021-07-05T13:24:03+09:00","default:tgoto","tgoto")
#ref(https://oncologynote.com/img/680303ba45.jpg)
具体的には、初回のマウススクロールかマウス移動で発火するJavaScriptを使ってGoogle Analyticsのタグを読み込みます。初回のマウススクロールかマウス移動が発生しないかぎりスクリプトファイルを読み込みませんので、Pagespeed Insightのスコアが低下しません。
''Google Analytics''を設置すると''Pagespeed Insight''のスコアが落ちてしまうので、Google Analyticsのスクリプトを遅延読み込みするようにしてスコア低下を回避します。
欠点としては、スクリプト読み込みまでに至らなかった人は拾えない（つまりページを一切スクロールせず離脱した人の直帰率が半円されない）ことや、セッション継続時間（サイト滞在時間）が実際より短く算出される可能性があることなどです。
具体的には、初回の''マウススクロール''か''マウス移動''で発火するJavaScriptを使ってGoogle Analyticsのタグを読み込みます。初回のマウススクロールかマウス移動が発生しないかぎりスクリプトファイルを読み込みませんので、Pagespeed Insightのスコアが低下しません。
欠点としては、スクリプト読み込みまでに至らなかった人は拾えない（つまりページを一切スクロールせず離脱した人の直帰率が反映されない）ことや、スクリプト読み込みの遅れによりセッション継続時間（サイト滞在時間）が実際より短く算出される可能性があることなどです。
*読み込みたいタグ [#gda32f1c]
Google Analyticsのサイトから取得できるトラッキングコードの''グローバルサイトタグ（gtag.js）''が下記のようなものだったとします。「UA-11111-01」のところには自分のトラッキングタグの情報が挿入されているはずです。
<!-- 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のところには自分のトラッキングIDを記入してください。このscriptをスキンのどこかに書き込んでおきます。
下記のような形で初回のscrollかmousemoveのイベントが発生したらbodyの最下部にグローバルサイトタグ（gtag.js）を読み込んでいます。例によってUA-11111-01のところ（2箇所）には自分のトラッキングIDを記入してください。このscriptをスキンのどこか（</body>の直前など）に書き込んでおきます。
あるいは、下記のテキストをanalytics.phpという名前のファイルにして保存し、スキンの</body>の直前に<?php include_once("analytics.php") ?>を設置して読み込みます。
<script>
function lazyLoadScript() {
function lazyAnalyticsScript() {
var scrollFirstTime = 1;
window.addEventListener("scroll", oneTimeFunction, false);
window.addEventListener("mousemove", oneTimeFunction, false);
function oneTimeFunction() {
if (scrollFirstTime === 1) {
scrollFirstTime = 0;
var adScript = document.createElement("script");
adScript.src = 'https://www.googletagmanager.com/gtag/js?id=UA-11111-01';
document.body.appendChild(adScript);
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);
window.removeEventListener("scroll", oneTimeFunction, false);
window.removeEventListener("mousemove", oneTimeFunction, false);
}
}
}
lazyLoadScript();
lazyAnalyticsScript();
</script>
あるいは、このテキストをanalytics.phpという名前のファイルにして保存し、スキンの</body>の直前に<?php include_once("analytics.php") ?>を設置してPHPでこのファイルを読み込みます。
JavaScriptをもう少し洗練させればより短くきれいに書けると思いますが、ひとまずこれで運用しています。
* PR「確かな力が身につくJavaScript「超」入門 第2版」 [#q8b32107]
JavaScriptの入門書としては現在発売されているものでは下記の『「確かな力が身につくJavaScript「超」入門 第2版」』が一番わかりやすく優れていると思います。HTML・CSSなどを習得してJavaScriptも学び始めたいという人にはこの本をオススメします（すでにある程度の知識がある人には若干もの足りないかも知れない）。
#ogp(https://amzn.to/3htGMk8)