Giter VIP home page Giter VIP logo

ga-dev-tools's Introduction

GA Demos & Tools

A showcase of demos and tools built with the various Google Analytics APIs and Libraries. View the Site

Submitting Feedback / Reporting Bugs

For the Demos & Tools site

For the Google Analytics platform

  • Documentation for all Google Analytics API, libraries and SDKs can be found on Google Analytics Developers.
  • If you have questions, please refer to the getting help section of the developers site to find the best place to get your questions answered.

Building and running the site locally

Requirements

  • Yarn

    This site is only tested and developed using yarn.

Running

To run the site locally, first make sure you have all the dependencies installed:

yarn

Also make sure to install the dependencies in the lib directory.

cd lib
yarn
cd ..

Then run the following (from the top level directory) and answer all prompts:

yarn start:app:production

All prompts can be skipped, but certain demos rely on prompt answers to fully function. Notably, any demo that requries authentication will require you to put in a valid Google client ID.

This will set up a local hot-reloading instance of the app that can try out at http://localhost:5000

Testing

To run tests, first make sure you have all the dependencies installed:

yarn

Then run the following:

yarn test

Whats in this repo

./src

This is where the majority of the client-side code lives. All of our demo code can be found here.

./gatsby-browser.js

This file is useful to decorate our app with functionality that is needed at runtime.

Of note, we use:

  • wrapRootElement

    Lets us wrap the root element in any necessary context/providers. We use it for injecting a material-ui Theme provider, and a Redux store.

  • onInitialClientRender

    Any code that should run once after the client renders goes here.

    This code pulls in and configures gapi, a Google library that makes calling Google APIs from javascript a breeze.

Also see Gatsby browser APIs.

gatsby-config.js

This is the main configuration file for our Gatsby site. All of our gatsby plugins are configured here.

  • gatsby-plugin-prefetch-google-fonts

    Allows us to download/prefetch Google Fonts. From their docs: "Can increase performance as opposed to loading webfonts from Google's external stylesheet."

  • gatsby-plugin-react-svg

    Makes it easy to load in SVGs as React components via the following stanza:

    import SVGComponentName from "-!svg-react-loader!../images/svg-name.svg"
    
  • gatsby-plugin-typescript

    Provides drop-in support for Typescript and TSX. <opinion>For a site like this, with demos that will live over many years, typescript is a handy way to make it easier to jump back in the code.</opinion>

  • gatsby-source-filesystem

    Lets us source data into the app that can be queried via graphql.

Also see Gatsby Config API.

ga-dev-tools's People

Contributors

anweshan avatar dependabot[bot] avatar diminishedprime avatar dspattison-google avatar grano avatar ikuleshov avatar jfyles avatar lucretiel avatar marycodes2 avatar mcohoon avatar n2o avatar philipwalton avatar tiembo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ga-dev-tools's Issues

Google Analytics API - Issue Experiment dimension

Hello,

I noticed there is a bug in Google Analytics API while trying to read experiments data (AB Test) from it. I need to get number of sessions per experiment & variation. The number I get from GA API is much lower than the one I can see in web interface.

I have investigated a bit and discovered that any time I add experiment dimensions (ga:experimentId or ga:experimentVariant) in API query the results are wrong.

See below an example of the difference I am talking about.

On 20th January 2015, GA says that we had over 12000 visits to an experiment (Experiment GA - 20150120)

experiment ga - 20150120

While API returns just 3718 visits (Experiment API - 20150120)

experiment api - 20150120

This issue affects to all our AB tests. Any advice on that?

Thanks a lot in advance.

Regards,

Iago.

API tool won't run reports!

All of a sudden, none of my reports will run when clicking Add-Ons > Google Analytics > Run Reports, on any accounts where I have reports set up. Happening to one other coworker, while the other two are fine (on PC using Chrome or Firefox for the broken ones, one of the people who has it working is using the same, one is on a Mac).

Save data in Query Explorer

Please make the saving data when filling the form data.
It can be a Hash links or cookie storage.
E.g. when I fill the form then afk, my session has been expired. I must refresh the page and clear the data.
Can you modify the hash in the browser address bar every time when I change (or blur) form fields or submitting the form.
I have an open page of ga-dev-tools full time of day. It will makes me happy.

ga:dateHour has wrong formatting

ga:dateHour dimension value contains date + hour, while it is formatted to date only.
I think it should be more like: moment().format('DD MMM YYYY, HH:mm')

image

ga("require", "ec.js"); is wrong

in the demo, many ga code examples uses ga("require", "ec.js");
according to my latest tests and GA docs should be ga("require", "ec"); without the ".js"

cheers,

Moment.js date formats broken for YOY in third party visualizations

It seems the changing of the year has broken the date formatting to calculate the year-over-year example in the third party visualizations example (https://ga-dev-tools.appspot.com/embed-api/third-party-visualizations/). I'm reviewing Moment.js docs to see if a different format may fix, but wanted to log the bug in the meantime.

The error is caused by end date preceding start date, visible in the hosted examples.
Many thanks for the work on this.

third party visualizations page, mismatch in id's

These aren't utilized in the javascript:

#data-chart-1-container
#data-chart-2-container

While the javascript expects

#chart-1-container
#legend-1-container
#chart-2-container
#legend-2-container

The demo code uses the correct ids (without "data-").

Inconsistency data

Maintainer's note: This comment has been removed because it contained user-sensitive data.

Feature Request: provide access to the GTM account

Hi there,
not sure if this is the right place to ask, but an access to the GTM account for the enhanced ecommerce demo will be helpful. to see how things has been done behind the scene of GTM.

one thing i'm willing to know is how the GTM send the GA hit in POST
https://enhancedecommerce.appspot.com/

the access may be provided via general user or gtm api where users can give themselves view access directly from the demo page.

*same thing can be done for the GA account
cheers,

p.s
beautiful project! 👍

Chrome freezing even in anonymous mode when try to authorize account

Hey,

whenever I try to login, after selection of account and type in of my credentials, I get back to QE and Chrome freeze (with a blue bar stopped somewhere in the middle).

From chrome console I can see this:
Failed to clear temp storage: It was determined that certain files are unsafe for access within a Web application, or that too many calls are being made on file resources. SecurityError

Different people with different computers got the same error. Could you please look at this or tell me what more do you want me to do for some additional debugging?

Thank you very much,

Vojta

GA Premium Audit Tool

Among all the Properties I have access to, a tool to see which Properties are Premium, and which are Standard. This is helpful to determine which Properties need to be enabled for Premium.

Query Explorer Tool - 500 Internal server error when exporting results

I am using Query Explorer Tool for pulling up the analytics results. The results are showing up on clicking of 'Get Data' button. When I try to export the results using the 'Excel TSV' button it throws a 500 Internal server error on the page. I have been getting this error since March 18th 2015. The export was working prior to it.

Thanks
Parag

Query explorer always needs a refresh on changing attributes

Every time i input a wrong query in input fields like sort,filters,metrics etc the error persists even though the field has been corrected.It always needs a refresh , also while doing a refresh the data is not retained.
Also it would be great if there is a search in dimension and metric field since it is annoying to manually search to all field and select the proper check box

Update the Query Explorer to use the Embed API.

  • Use the Embed API ViewSelector component to set/update the ids parameter.
  • Use the Embed API Data component to run the query.
  • Use the Embed API DataChart component to display the table of results.
  • Add support for the keywords today, yesterday, and NdaysAgo in date fields.
  • Add the ability to switch between segment ID and definition.
  • Add search functionality to the dimensions, metrics, and segment pickers.
  • Add the "samplingLevel" parameter.
  • Allow including the ids parameter in the share link.
  • Allow including the access_token in the API Query URI.
  • The Share and API links reflect the last run report, not the current form data.

Is it possible to embed this without user authentication?

I've had a lot of trouble tracking down the right way to go about this, but I would like to build a custom dashboard for a client's CMS that would give a few views of their site data, but I'd like to not require the authentication button and login process every time. Is that possible to do with the embed-api, or would I need to go a different route?

GA add-on in Google spreadsheets won't run

I have reports set up in Google spreadsheets, but every time I try to run them (Add-ons -> Google Analytics -> Run reports) the popup freezes right before it runs. Usually it has a loading circle in the middle to signify that it's running, but it hasn't been showing up since yesterday afternoon. Attached is a picture showing what I mean. It's happening on every report I try, on both accounts that I have linked to GA. It doesn't seem to be an internet problem since I can query using the query tool just fine, and I've restarted my computer twice with no luck. I've also run these reports many times in the past, so it's not a report-specific problem. Any advice? Thanks!
example

Weird data

Hi,
I had a weird data on my website.

ids:ga:31871614
metrics:ga:users
filters:ga:hostname==www.jajen90.com.tw
start-date:2014-11-01
end-date:2014-11-30

Get Data is 3.

ids:ga:31871614
metrics:ga:users
filters:ga:hostname==www.jajen90.com.tw
start-date:2014-11-07
end-date:2014-11-30

Get Data is 4.

Please tell me why.
Thanks for your help.

Your query matched 539 results

When executing a query with a result of 539 today. I noticed that the results in the tabular view do not display on the screen in IE, Chrome, and Firefox.

I am having this error when loading google visualisation charts

Create a new ViewSelector2 instance to be rendered inside of an
* element with the id "view-selector-container".
*/
var viewSelector = new gapi.analytics.ext.ViewSelector2({
container: 'view-selector-container',
})
.execute();

Its telling me undefined is not a function

Request for a demo of embed analytics with auto login

I'd be very much interested in a demonstration showing how to embed an analytics with an access_token generated preventing the "authorize" button.
I've read many articles regarding this feature, but I can't manage to make it work otherwise than with a token generetad from the oAuth playground...
Do you think that could be possible ?

Bug: "list" and "position" in the Enhanced Ecommerce click object

Hey guys,

Thanks for the amazing tool!

I noticed two things that might be bugs / omissions:

The "position" parameter correctly lists the position in the impression objects, but in the click "products" object "position" is always 0.

Also, there's the "list" parameter in the "products" object in the click action. This seems redundant and unsupported (at least no mention in the official docs), as you already provide the "list" in the actionField.

Limit number of decimal places in tables

screen shot 2014-08-05 at 8 16 58 pm

I'm having trouble limiting the number of decimal places in my tables. For metrics like Ecommerce Conversion Rate and Revenue Per Click, there are more than two decimal places.

I tried using FractionDigits in the number formatter options but that doesn't work.

What's the best way to fix this?

Thanks.

No way of using tool anymore with new design

Used to use very intensivly ga-dev-tools and now I can't stand it anymore

New design is a hell due to:

  1. can not SAVE request via share if tool-page came unresponsive => complete loss of my work
  2. can not EDIT segment & other fields simple way, now I have to select it with mouse, copy, click on cross, paste & not pressing enter modify it, then press enter or else it'll be cleared => complete loss of my time
  3. can not COPY-PASTE data right from report page to my google spreadsheet due to localized data => complete loss of goal of ga-dev-tool

RIP
Justislav Bogevolnov, analyst & expert in GA
[email protected]

Request Git for Ibby's T-Shirt Shop

Hello

Is the Enhanced E-Commerce demo website open source? See below for a link to the webpage I am talking about. Is there a git that exists for this website? I've searched but there cannot locate a git. If its not currently open source and available - are there any plans to make it open source?

https://enhancedecommerce.appspot.com/

I can not Authorize Account

I dont know why Authorize Account Button is hidden.
Are there any ways to use this tool or older version?

Regards.

Demo on how to format Query Explorer Dates

Dates from the Query Explorer come back as a YYYMMDD string but there seem no easy way to format the result using the visualization.ChartWarpper. For example "hAxis":{format:'MMM d, y'}, does not seem to work and the labels on the tick marks end up as unformulated stings (i.e. 20150315).

loosing request setup if ga-dev-tool lost token

After my lunch break I modified request and it went very long "Loading"

I remember you told me in #60 I just need to refresh page in my browser --- so I got setup from URL but not form my latest request

Please consider modifying URL accordingly or making request URL field constantly present

Feature request: Sort dimensions and metrics alphabetically

It will be great to have functionality similar to Google Analytics UI where you can choose to see dimensions/metrics either grouped in their sections or alphabetically. See attached example from Google Analytics Dimensions in custom reports
image

GA API Tool Issue

New tool does not allow GoalXXConversions to be edited unless you type in the full line, defeating the purpose of the new search function. Curently puts the metric as GoalXXConversions which isn't a valid metric and isn't editable if you don't type the entire thing out yourself.

image

Thanks

Unable to authorise GA account since the redesign

I am trying to extract some of our GA stats using this API however since the site (the ga-dev-tools site) redesign I am unable to authorise the our GA account in order to able me to use this API. I cannot any link on the website that might help navigate through the changes.
Is there anyway I can use this API at all?

Not Clear on how to log on to new GA Explorer

I'm logged into my Google account, but could not retrieve data until I clicked on the big orange banner Google Analytics banner - There is nothing that says click here to log on! Most frustrating.

Feature Request: Custom Segment expander

Place a button next to the segment selection box in the query explorer where, if someone has chosen a custom segment, they can have the "full" version fetched into the segment box via management API.
(I'm putting this here as a place holder, but might do it myself.)

Can't make Third Party Visualizations working...

Hello,

I’m very interested by the Embed API, i’m looking to produce a dashboard for my website analytics and
i want to start from the Third Party Visualizations but I can’t reproduce it…

When I copy the whole code that doesn’t work, I get only this code on my website :
You are logged in as: [email protected]

It’s also the same with the example n5 : working with custom components.
I probably missing something but I don’t know what… if you have an idea I will be please.

Thx.

Direct link to this Report fails

Query Explorer data table not showing

After I press "Get Data" on the Query Explorer:
https://ga-dev-tools.appspot.com/explorer
...the results table loads into the source, but does not display on the page.

I think the issue may be:
#resultTable .google-visualization-table { width: 0px; }
...which is applied as an inline style.

Removing this inline style via inspect element shows the table.

Feature request: Filter dimensions and metrics as you type

It will be great to be able to start typing a dimension or metric in the input fields in the query explorer and the list to be filtered to the items in the list that match the typed string.

For example if I type "product" i should be able to see:
ga:productName
ga:productSku
etc.

Right now if you do not remember exactly what the dimension/metric you are looking for is you have to look through all the entries.

It will be a great enhancement to an already awesome tool :)

Updated Query Explorer Interface

Seems to be a big step backwards - making it prettier at the cost of actual functionality. And no, the addition of 'sampling level' does not make up for it.
First thing I tried to do was paste in pre-defined sets of metrics and dimensions, the interface lagged and had difficulty processing the string and breaking it up into visually appealing 'pills'.

The Query explorer has previously been a great place to run very fast little tests and checks - the new interface kills much of that.

Feature Request: Add option to include view ID in "Share Report"

It looks like the Share report feature intentionally does not include the view, but it will be very helpful to have a check box to actually include that as part of the URL. I share configuration often with people and it seems like an extra step to have to specify separately which view the configuration applies to.

basic dashboard

<script> (function(w,d,s,g,js,fs){ g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}}; js=d.createElement(s);fs=d.getElementsByTagName(s)[0]; js.src='https://apis.google.com/js/platform.js'; fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');}; }(window,document,'script')); </script>
<script> gapi.analytics.ready(function() { /** * Authorize the user immediately if the user has already granted access. * If no access has been created, render an authorize button inside the * element with the ID "embed-api-auth-container". */ gapi.analytics.auth.authorize({ container: 'embed-api-auth-container', clientid: 'REPLACE WITH YOUR CLIENT ID', }); /** * Create a new ViewSelector instance to be rendered inside of an * element with the id "view-selector-container". */ var viewSelector = new gapi.analytics.ViewSelector({ container: 'view-selector-container' }); // Render the view selector to the page. viewSelector.execute(); /** * Create a new DataChart instance with the given query parameters * and Google chart options. It will be rendered inside an element * with the id "chart-container". */ var dataChart = new gapi.analytics.googleCharts.DataChart({ query: { metrics: 'ga:sessions', dimensions: 'ga:date', 'start-date': '30daysAgo', 'end-date': 'yesterday' }, chart: { container: 'chart-container', type: 'LINE', options: { width: '100%' } } }); /** * Render the dataChart on the page whenever a new view is selected. */ viewSelector.on('change', function(ids) { dataChart.set({query: {ids: ids}}).execute(); }); }); </script>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.