search

keithclark / gadebugger

A Chrome, Firefox & Opera devtools extension for debugging Google Analytics tracking code
https://keithclark.github.io/gadebugger/
MIT License
238 stars 65 forks source link

Add support for 'beacon' and 'xhr' transport mechanism #8

Closed remillc closed 9 years ago

remillc commented 9 years ago

With the new transport field added on the Release 2015-04-13, setting it either on beacon or xhr will break gaDebugger.

Here are some infos on what the request object comming from the chrome.devtools.network.onRequestFinished listener looks like with each of the mentionned transport mechanisms:

beacon

{
    "startedDateTime": "2015-07-23T16:18:44.309Z",
    "time": 43.999999994412065,
    "request": {
        "method": "POST",
        "url": "https://www.google-analytics.com/collect",
        "httpVersion": "HTTP/1.1",
        "headers": [...],
        "queryString": [],
        "cookies": [],
        "headersSize": 540,
        "bodySize": 679,
        "postData": {
            "mimeType": "text/plain",
            "text": "v=1&_v=j37&a=336231154&t=pageview&_s=1&dl=http%3A%2F%2Fguides.bib.umontreal.ca%2Fdisciplines%2F481-Bandes-dessinees-en-sciences-de-la-sante%3Ftab%3D2181&ul=en-us&de=UTF-8&dt=Bandes%20dessin%C3%A9es%20en%20sciences%20de%20la%20sant%C3%A9%20-%20Guides%20par%20discipline%20-%20Biblioth%C3%A8ques%20-%20Universit%C3%A9%20de%20Montr%C3%A9al&sd=24-bit&sr=1680x1050&vp=1663x965&je=1&fl=18.0%20r0&_utma=145944496.1597017414.1432568139.1437420747.1437420747.1&_utmz=145944496.1437420747.1.1.utmcsr%3Dbib.umontreal.ca%7Cutmccn%3D(referral)%7Cutmcmd%3Dreferral%7Cutmcct%3D%2F&_utmht=1437668324309&_u=SCCCAQAjI~&jid=&cid=1597017414.1432568139&tid=UA-8791511-1&cd1=autre&cd2=oui&z=1983562138"
        }
    },
    "cache": {},
    "timings": {
        "blocked": 2.43100000079721,
        "dns": -1,
        "connect": -1,
        "send": 0.12199999764562008,
        "wait": 40.32600001664837,
        "receive": 1.1209999793208638,
        "ssl": -1
    },
    "connection": "28174",
    "pageref": "page_1"
}

xhr

{
    "startedDateTime": "2015-07-23T17:05:42.889Z",
    "time": 40.36799998721108,
    "request": {
        "method": "POST",
        "url": "https://www.google-analytics.com/r/collect",
        "httpVersion": "HTTP/1.1",
        "headers": [...],
        "queryString": [],
        "cookies": [],
        "headersSize": 542,
        "bodySize": 692,
        "postData": {
            "mimeType": "text/plain",
            "text": "v=1&_v=j37&a=609630980&t=pageview&_s=1&dl=http%3A%2F%2Fguides.bib.umontreal.ca%2Fdisciplines%2F481-Bandes-dessinees-en-sciences-de-la-sante%3Ftab%3D2181&ul=en-us&de=UTF-8&dt=Bandes%20dessin%C3%A9es%20en%20sciences%20de%20la%20sant%C3%A9%20-%20Guides%20par%20discipline%20-%20Biblioth%C3%A8ques%20-%20Universit%C3%A9%20de%20Montr%C3%A9al&sd=24-bit&sr=1680x1050&vp=1663x965&je=1&fl=18.0%20r0&_utma=145944496.1597017414.1432568139.1437420747.1437420747.1&_utmz=145944496.1437420747.1.1.utmcsr%3Dbib.umontreal.ca%7Cutmccn%3D(referral)%7Cutmcmd%3Dreferral%7Cutmcct%3D%2F&_utmht=1437671142884&_u=SCCCAQAjI~&jid=911100966&cid=1597017414.1432568139&tid=UA-8791511-1&_r=1&cd1=autre&cd2=oui&z=846675973"
        }
    },
    "response": {...},
    "cache": {},
    "timings": {
        "blocked": 3.94299998879433,
        "dns": -1,
        "connect": -1,
        "send": 0.12100001913495051,
        "wait": 35.15499999048192,
        "receive": 1.1489999887998792,
        "ssl": -1
    },
    "connection": "36187",
    "pageref": "page_2"
}

If i find some time, I'll try to patch the code...

keithclark commented 9 years ago

Thanks for bringing this to my attention. Initial thoughts are:

1) Intercept the POST request, grab the params from the body and reconstruct them as GET url with a querystring then pass it to GACoreAPI.parse. This would need to happen in each browser extension.

2) Modify GACoreAPI.parse to accept a request object. This would keep the code centralised but the problem is the native request object differs between browsers so we'd need to map properties to a common object.

keithclark commented 9 years ago

If you checkout the support-transport-field branch and build you should now have support for image, xhr and beacon.

Feedback appreciated.

keithclark commented 9 years ago

This has been fixed and merged. See https://github.com/keithclark/gadebugger/commit/5e5348d8372c7576e47d7373feee717f0c21d1ed