通过gtag.js 向Google Analytics（分析）发送数据| 适用于网站 ...

通过gtag.js 向Google Analytics（分析）发送数据. 本页内容; 用event 命令发送数据; 将数据以路由方式发送到组和媒体资源; 了解发送事件的时间. Google Analytics（分析） 衡量 UniversalAnalytics(gtag.js) Language English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어 Google Analytics（分析） 衡量 UniversalAnalytics(gtag.js) 指南 开始 将gtag.js添加到您的网站向GoogleAnalytics（分析）发送数据设置永久性值 衡量常见的用户互动 网页浏览量事件来电分析应用/屏幕浏览量用户计时异常 高级 Cookie和用户识别跨网域衡量自定义维度和指标停用广告功能增强型电子商务增强的链接归因IP匿名化重命名全局对象为选择停用的用户停用GoogleAnalytics（分析） 解决方案 检查异常及自定义维度和指标单页应用 资源 Cookie的使用限制和配额 首页 产品 GoogleAnalytics（分析） 衡量 UniversalAnalytics(gtag.js) 通过gtag.js向GoogleAnalytics（分析）发送数据 本页介绍了如何使用gtag.js命令将数据从您的网站发送到GoogleAnalytics（分析）。

使用event命令发送数据 将全局代码段添加到网页后，使用event命令将数据发送到GoogleAnalytics（分析）。

例如，使用以下event命令来表示用户已使用其Google帐号登录： gtag('event','login',{'method':'Google'}); 详细了解API参考中的event命令。

将数据以路由方式发送到组和媒体资源 您可以将一组衡量信息发送给一个或多个GoogleAnalytics（分析）媒体资源ID，将另一组信息发送给其他媒体资源ID。

您可以将媒体资源分组并以路由方式将数据发送给这些组。

例如，以下代码示例说明了如何将sign_in事件以路由方式发送到包含两个GoogleAnalytics（分析）媒体资源的组“agency”。

//Configureatarget gtag('config','GA_MEASUREMENT_ID_1'); gtag('config','GA_MEASUREMENT_ID_2',{'groups':'agency'}); gtag('config','GA_MEASUREMENT_ID_3',{'groups':'agency'}); //Routethissign_ineventtoAnalyticsIDsinthe'agency'group: gtag('event','sign_in',{'send_to':'agency'}); 详细了解如何分组并以路由方式发送数据。

了解发送事件的时间 在某些情况下，您需要知道事件何时成功发送至GoogleAnalytics（分析），以便您随后立即采取措施。

这种情形常见于当您需要记录导致用户离开当前页面的特定互动时。

许多浏览器一旦开始加载下一个页面就停止执行JavaScript，这意味着gtag.jsevent命令可能永远不会执行。

例如，您可能需要向GoogleAnalytics（分析）发送事件以记录用户点击了表单的提交按钮，但在大多数情况下，点击提交按钮会立即开始加载下一个页面，因此没有机会执行任何event命令。

解决方法是拦截该事件以阻止加载下一个页面，这样您可以将事件发送给GoogleAnalytics（分析）。

发送事件后，以编程方式提交表单。

实现事件回调函数 可以实现一个事件回调函数：一旦事件成功发送，系统就会调用该函数。

以下示例说明如何取消表单的默认提交操作、向GoogleAnalytics（分析）发送事件以及使用事件回调函数重新提交该表单： //Getareferencetotheformelement,assuming //itcontainstheIDattribute"signup-form". varform=document.getElementById('signup-form'); //Addalistenerforthe"submit"event. form.addEventListener('submit',function(event){ //Preventthebrowserfromsubmittingtheform //andthusunloadingthecurrentpage. event.preventDefault(); //SendtheeventtoGoogleAnalyticsand //resubmittheformoncethehitisdone. gtag('event','signup_form_complete',{ 'event_callback':function(){ form.submit(); } }); }); 处理超时 上面的例子有一个缺点：如果gtag.js库未能加载，事件回调函数将永远不会运行，用户将永远无法提交表单。

当您在事件回调函数中添加重要的网站功能时，务必使用超时函数来处理gtag.js库未能加载的情况。

以下示例对上述代码进行了扩充，以使用超时处理。

如果在用户点击提交按钮一秒钟之后事件回调函数还未运行，则立即重新提交该表单。

//Getsareferencetotheformelement,assuming //itcontainstheIDattribute"signup-form". varform=document.getElementById('signup-form'); //Addsalistenerforthe"submit"event. form.addEventListener('submit',function(event){ //Preventsthebrowserfromsubmittingtheform //andthusunloadingthecurrentpage. event.preventDefault(); //CreatesatimeouttocallsubmitFormafteronesecond. setTimeout(submitForm,1000); //Monitorswhetherornottheformhasbeensubmitted. //Thispreventstheformfrombeingsubmittedtwiceincases //wheretheeventcallbackfunctionfiresnormally. varformSubmitted=false; functionsubmitForm(){ if(!formSubmitted){ formSubmitted=true; form.submit(); } } //SendstheeventtoGoogleAnalyticsand //resubmitstheformoncethehitisdone. gtag('event','signup_form_complete',{ 'event_callback':submitForm }); }); 如果您在整个网站中使用上述模式，请创建一个辅助函数来处理超时。

以下辅助函数以一个函数作为输入，并返回一个新函数。

如果所返回的函数在超时时限（默认的超时时限为一秒）以内得到调用，该函数将清除超时事件并调用输入函数。

如果所返回的函数在超时时限以内未得到调用，则无条件调用输入函数。

functioncreateFunctionWithTimeout(callback,opt_timeout){ varcalled=false; functionfn(){ if(!called){ called=true; callback(); } } setTimeout(fn,opt_timeout||1000); returnfn; } 通过这种方式，您可以使用超时处理封装所有事件回调函数，即使在您的事件发送失败或gtag.js库根本未载入的情况下也可以确保您的网站正常工作。

//Getsareferencetotheformelement,assuming //itcontainstheIDattribute"signup-form". varform=document.getElementById('signup-form'); //Addsalistenerforthe"submit"event. form.addEventListener('submit',function(event){ //Preventsthebrowserfromsubmittingtheform //andthusunloadingthecurrentpage. event.preventDefault(); //SendstheeventtoGoogleAnalyticsand //resubmitstheformoncethehitisdone. gtag('event','signup_form',{'event_callback':{ createFunctionWithTimeout(function(){ form.submit(); }) }}); }); 指定不同的传输机制 默认情况下，gtag.js会选择HTTPS方法和传输机制以优化匹配的发送。

有以下三个选项： 'image'（使用Image对象） 'xhr'（使用XMLHttpRequest对象） 'beacon'（使用navigator.sendBeacon方法） 前两种方法都具有上一部分所描述的问题（在网页未加载的情况下命中无法发送）。

navigator.sendBeacon方法通过将命中异步传输到网络服务器来解决此问题，而无需设置命中回调。

对于支持此机制的浏览器，以下代码可将传输机制设置为'beacon'： gtag('config','GA_MEASUREMENT_ID',{'transport_type':'beacon'}); 目前，如果传输机制设置为'beacon'，则gtag.js仅使用navigator.sendBeacon。

但是，gtag.js将来可能会转而在支持此机制的浏览器中将'beacon'用作默认机制。

Exceptasotherwisenoted,thecontentofthispageislicensedundertheCreativeCommonsAttribution4.0License,andcodesamplesarelicensedundertheApache2.0License.Fordetails,seetheGoogleDevelopersSitePolicies.JavaisaregisteredtrademarkofOracleand/oritsaffiliates. Lastupdated2021-02-10UTC. [] [] GitHub 试用GoogleAnalytics（分析）示例 StackOverflow 询问使用google-analytics代码的问题 Twitter 在Twitter上关注@googleanalytics 视频 在YouTube上观看GoogleAnalytics（分析）视频 交流 社区和最新动态 获取帮助 报告问题 产品信息 Protocol/SDK政策 品牌信息政策 开发者控制台 GoogleAPIConsole GoogleCloudPlatformConsole GooglePlay管理中心 FirebaseConsole ActionsonGoogleConsole CastSDKDeveloperConsole ChromeWebStoreDashboard Android Chrome Firebase GoogleCloudPlatform 所有产品 条款 隐私权政策 ICP证合字B2-20070004号 订阅GoogleDevelopers简报 订阅 Language English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어