关于汉墨关于汉墨
使用Google Analytics谷歌分析统计深色模式
时间:2024-12-04 来源:月光博客 浏览:4772次

目前主流操作系统(Windows、mscOS、iOS和Android)均支持深色模式,很多网站也通过修改代码支持深色模式,那么,我们如何在Google Analytics谷歌分析中统计到底有多少人在使用深色模式,下面我就介绍一下具体的统计方法。

通过事件统计的方式来统计深色浅色模式,设置一个事件名称,里面的数值就是深浅代号,谷歌分析UA里事件的调用方法如下所示。

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

编辑网站的全局Javascript文件里的Google Analytics统计代码,将代码修改为如下所示:

function () {

  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {

    return 'Dark';

  }

  else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {

    return 'Light';

  }

  return 'No Preference';

}

var dimensionValue = darkmode();

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');

ga('send', 'pageview');

ga('send', 'event','darkmode', dimensionValue);

代码发布之后,过一段时间,就可以在 Google Analytics(谷歌分析)中查看数据了。

具体查看位置在:“实时”-“事件”,以及“行为”-“事件”里。

上述代码修改仅适用于Google Universal Analytics统计代码。

对于新版的Google Analytics 4统计代码,其事件统计代码修改为如下代码。

gtag('event', <action>, {

  'event_category': <category>,

  'event_label': <label>,

  'value': <value>

});

因此,对于GA4来说,其他代码不变,发送事件的代码修改为如下即可。

gtag('event', dimensionValue, {'event_category': 'darkmode'});

微信客服二维码
微信客服
返回顶部

获取报价

获取验证码
提交
留下您的联系方式,不久后会收到来电!

信息提交成功,请留意客服来电,谢谢~