7

使用Google Analytics谷歌分析统计深色模式

 2 years ago
source link: https://www.williamlong.info/archives/6916.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

使用Google Analytics谷歌分析统计深色模式

2022-9-6 22:24:38 | 作者: 月光 | 分类: 网站建设 | 评论: 0 | 浏览: 91

  目前主流操作系统(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'});

使用Google Analytics谷歌分析统计深色模式

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK