Google Analytic谷歌分析

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

---

         

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

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

;

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

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

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

οnclick=”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

1. 安装依赖

npm install react-ga --save

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

import * as ReactGA from 'react-ga' ;

ReactGA .initialize( 'UA-110812134-1' , {

debug: true

}); //开启debug模式利于调试

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

3. 具体在组件中使用 , 主要是用来加入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(

          href = { data .facebook_link} onClick = {() => { onLinkSocialPlatform ( 'facebook' ); }} target ="_blank" >

          className = { style .link1} >

                   

to ="/terms" onClick = {() => { onPageviewChange ( '/terms' ); }} > { i18n .TERMS_FOOTER_LINK_TEXT}          

                   

to ="/privacy" onClick = {() => { onPageviewChange ( '/privacy' ); }} > { i18n .PRIVACY_FOOTER_LINK_TEXT}

         

     )

}

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