Google Analytic谷歌分析

写在前面----哈哈,从昨天到今天 , 弄了一天才捣鼓出来 , 谷歌官网文字太多,重点太少 , 查百度知乎回答太过老旧早已不合适现在的版本 . 尤其是react-ga最新版都已经使用react-router4 了, 希望你看到这篇文章可以少走一些坑~~ 如果有疑问或者建议 , 欢迎留言!!

google分析,首先需要注册一个google帐号,对应好要管理的网站 , 然后该帐号会具备一个id. 在前端的代码层面需要加入这个id, 进行和谷歌api的对接 , google会网站的相关跳转和刷新进行页面访问/跳出率等相关的统计, 但是无法对url改变但没有刷新的路由进行记录和分析 . 所以需要手动引入 .

方案1----------index.html页尾添加谷歌分析代码

 
   <!-- Global site tag (gtag.js) - Google Analytics --> 
  
   <script async src=" 
   https://www.googletagmanager.com/gtag/js?id=UA-110783772-0"></script> 
   ; 
  
   <script> 
  
     window.dataLayer = window.dataLayer || []; 
  
     function gtag(){dataLayer.push(arguments);} 
  
     gtag('js', new Date()); 
  
     gtag('config', 'UA-110783771-0'); 
  
   </script>

上述代码需要更换id ,否则就会链接到我的谷歌分析 , 这段整个插入</body>前即可

这样引入可以直接访问到全局变量, 所以可以直接调用,例如:

( 以下api本人还未验证,朋友使用确实可行,但具体api有变动!!需要另行查询 )

 
  onclick=”ga(‘send’, ‘event’, ‘PDF’, ‘Download’, ‘Company Brochure – PDF Download’);“ 
 

方案2----------使用react-ga库(使用中方案)

npm文档说明 : https://www.npmjs.com/package/react-ga

github上的demo地址 : https://github.com/react-ga/react-ga#reactgasetfieldsobject

安装依赖

 
  npm install react-ga --save 
 

首先在项目根组件里引入组件, 并进行初始化操作, 规定好对应的id

 
   import 
   * 
    as 
    ReactGA 
    from 
    'react-ga' 
   ; 
  
   ReactGA 
   .initialize( 
   'UA-110812134-1' 
   , { 
  
   debug: 
   true 
  
   }); //开启debug模式利于调试

开启debug模式后 , 事件响应之后会有如下的console

具体在组件中使用 , 主要是用来加入pageview 和 event

 
   constructor 
   (props: {}) { 
  
   super 
   (props); 
  
    this 
    .onPageviewChange = 
    this 
    .onPageviewChange.bind( 
    this 
    ); 
   
    this 
    .onResourceLink = 
    this 
    .onResourceLink.bind( 
    this 
    ); 
   
    } 
   
     onPageviewChange (site) { 
    
     ReactGA.pageview(site); 
    
     } 
    
     //GA会统计到主页面的访问 
    
     onResourceLink (site) { 
    
     ReactGA.event({category: 
     'Resource' 
     , action: 
     'linkClick' 
     , label: site}); 
    
     } 
    
     //GA会进行事件的统计 , 事件category(种类) action(动作) label(标签) ,三个层面分别可以看到对应数据 , 也可以在相应类中查看较差的类 
    
    render(){ 
   
        return( 
   
    <a 
    href 
    = 
    { 
    data 
    .facebook_link} 
    onClick 
    = 
    {() => { 
    onLinkSocialPlatform 
    ( 
    'facebook' 
    ); }} 
     target 
    ="_blank" 
    ><FaceBookIcon /></a> 
   
     <ul 
     className 
     = 
     { 
     style 
     .link1} 
     > 
    
     <li><Link 
     to 
     ="/terms" 
     onClick 
     = 
     {() => { 
     onPageviewChange 
     ( 
     '/terms' 
     ); }} 
     > 
     { 
     i18n 
     .TERMS_FOOTER_LINK_TEXT} 
          
     </Link></li> 
    
     <li><Link 
     to 
     ="/privacy" 
     onClick 
     = 
     {() => { 
     onPageviewChange 
     ( 
     '/privacy' 
     ); }} 
     > 
     { 
     i18n 
     .PRIVACY_FOOTER_LINK_TEXT} 
     </Link></li> 
    
     </ul> 
    
    ) 
   
    }

成功啦 , 最后统计到的信息如下:

Google Analytic谷歌分析

猜你喜欢