ブログに統計コードを有効にしている場合、ローカルでテストする際にも統計コードが実行され、大量の localhost の無効なアクセスログが生成され、データの正確性に影響を与えます。同時に、テスト用のドメインも持っており、このドメインにアクセスした場合にも統計コードをトリガーしたくありません。
では、統計コードを私の本番ドメイン blog.yfi.moe でのみ実行するにはどうすればよいでしょうか？
前提知識#
この方法は、このような方法で追加されたトラッキングコードにのみ有効です。テーマが提供する方法を使用している場合は、テーマファイルを自分で変更する必要があるかもしれませんが、それはこの記事の範囲外です。
変更#
完成品を貼り付けます：
このような js コードが注入されると、現在のドメインが blog.yfi.moe の場合にのみ実行されます。
<script>
var host = window.location.host;
if (host == "blog.yfi.mo") {
// google analytics 1
(function () {
var ggtag = document.createElement('script');
ggtag.async = true;
ggtag.src = 'https://www.googletagmanager.com/gtag/js?id=G-*******'; // ここで G- のコードを変更
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ggtag, s);
})();
//google analytics 2
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-********'); // ここで G- のコードを変更
// umami
(function() {
var analytics = document.createElement('script');
analytics.async = true;
analytics.src = 'https://change-to-your.domain/script.js'; // 自分のドメインに変更
analytics.setAttribute('data-website-id', 'e0****a7-****-****-****-88e5****5132'); // トラッキングIDを変更
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(analytics, s);
})();
}
</script>
要するに、コードを実行する前に、現在のウェブページのドメインが blog.yfi.moe であるかどうかを判断し、統計コードのスクリプトを実行するかどうかを決定します。
ChatGPT に尋ねたところ、現在のドメインを取得する方法は window.location.host を使用するとのことでした。また、<script async src="https://www.googletagmanager.com/gtag/js?id=G-*******"></script> のようなスクリプトを純粋な JavaScript の形式に変換する方法について尋ねたところ、次のような回答がありました：
(function () {
var ggtag = document.createElement('script');
ggtag.async = true;
ggtag.src = 'https://www.googletagmanager.com/gtag/js?id=G-*******';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ggtag, s);
})();
少し変ですが、動作するようです。ただし、async がどのように機能するかはわかりません。とりあえずこれで行きましょう。
Google から提供されたコードは 2 つのセクションに分かれており、2 番目のセクションはそのまま使用すればよいです。
umami のコードも同様です。