Use Embed API to embed Google Analytics location map view - google-analytics

THe below is a screenshot of a view on the Google analytics website (Geo > Location > Primary Dimension = city)
I would like to embed this exact view or replicate it as similarly as possible using google's Embed API and display it on my own site.
I have followed the tutorial here > https://developers.google.com/analytics/devguides/reporting/embed/v1/devguide and got the simple line graph working on my site but I cant seem to find any information showing how to add the map functionallity, the pie chart, or the table like we see in the below.
Are there any good examples or tutorials that could help me with this?
I tried the documentation but I just dont see a lot of explanation regarding what you can create with the API.

How about something like this?
http://jsbin.com/relufutenuto/2/edit
You can set chart options based on the options allowed by the various Google chart libraries. Here's the Google chart documentation for the chart type GEO:
https://developers.google.com/chart/interactive/docs/gallery/geochart#Configuration_Options
Note: you might have to disable pop-up blockers to get auth to work in jsbin, but this should give you the idea.
Here's the part of the code that sets the chart type of options:
var timeline = new gapi.analytics.googleCharts.DataChart({
query: {
'ids': 'ga:1234',
'dimensions': 'ga:country',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'GEO',
container: 'timeline',
options: {
region: '155', // Western Europe
displayMode: 'markers'
}
}
});

Related

Google analytics get custom report from api call

I am very new to this google analytics thing.
I have 3 things.
A RESTapi written using node.js express framework.
A mobile app written using react native
A admin panel UI written using vue.js
Mobile app is a food app. It has so many restaurants.
I want to pass a restaurant_id and need to get the dish views for that specific restaurant only.
for that I have to make a API call from my admin panel UI.
According to official docs I have to make my api call like this.
function makeApiCall() {
var apiQuery = gapi.client.analytics.data.ga.get({
'ids': TABLE_ID,
'start-date': '2010-01-01',
'end-date': '2010-01-15',
'metrics': 'ga:sessions',
'dimensions': 'ga:source,ga:keyword',
'sort': '-ga:sessions,ga:source',
'filters': 'ga:medium==organic',
'max-results': 25
});
// ...
}
To pass a such TABLE_ID, how do I create a table in my analytics?
As well as start-date and end-date are parameters I guess.
How do I create such params along with that TABLE?
If you look at the sentence in the documentation that precedes the code example you will see that TABLE_ID refers to the view id:
The easiest way to get the view id is to navigate in the admin section to the "view settings" (first item in the rightmost column). You will find the view id in the "Basic settings" section.

Why the Google Analytics API is eating the "\" in my filter query?

I am playing with Google Analytics API and found it very interesting. But today I came with a problem that can't be solved.
I am sending a filter like this:
'filters':'ga:pagePath=~^/q-\d+/\d+$'
It's working good in the Query Explorer but not working with my code.
After some tests I found that the query is wrong when it's sent. Here is from the "Network" panel of my Chrome debugging tool:
As in the picture, the \d became d and I guess that is the reason the data is not correctly showing up.
How can I fix this?
Here is my code:
var o ={
'ids': 'ga:' + profileId,
'start-date': $('#startdate').val(),
'end-date': $('#enddate').val(),
'metrics': 'ga:pageviews,ga:uniquePageviews',
'dimensions': 'ga:pagePath',
'sort':'ga:pagePath',
'filters':'ga:pagePath=~^/q-\d+/\d+$'
};
gapi.client.analytics.data.ga.get(o)
.then(function(response) {
Thanks,
You need to escape backslash symbols:
'filters':'ga:pagePath=~^/q-\\d+/\\d+$'
This this can be easily checked:
console.log('ga:pagePath=~^/q-\\d+/\\d+$');
console.log('ga:pagePath=~^/q-\d+/\d+$');
If you are using custom events in GA probably you can take a look at http://mixpanel.com or http://www.devmetrics.io, they provide better event model and event oriented API / UI.

Google Analytics API deviceCategory

I am trying to use the Google Analytics API (v3) in Google Scripts to pull Device Category information from Google Analytics.
Within Analytics under Audience -> Mobile -> Overview there is a Device Category section listing 'tablet', 'mobile' and 'desktop'. I wish to pull these numbers into a Google Sheet that my script is attached to.
The code I believe I should be using is:
ga:deviceCategory==mobile (to pull mobile traffic) and ga:deviceCategory==tablet to pull tablet traffic.
However, I receive the error:
Invalid dimension or metric: ga:deviceCategory==desktop
I'm somewhat confused by this as Google's own documentation says that deviceCategory is a valid dimension
(https://developers.google.com/analytics/devguides/reporting/core/dimsmets#view=detail&group=platform_or_device&jump=ga_devicecategory)
If I remove the device type from the end ('ga:deviceCategory') I get the error:
Unknown metric(s): ga:deviceCategory (line 43, file "Code")
This leads me to believe that I need to include the metric (which I believe is 'pageviews') beforehand. If this is the case, can someone show me how I pull in the figures for mobile/tablet traffic?
I am having no other issues pulling other aspects of my data. For example:
var impressions = Analytics.Data.Ga.get(tableId, startDate, endDate, 'ga:visits').rows.toString();
works fine.
For reference, this is the full code I am using for device Category:
// Get Mobile Visits, this is the number of visits from mobile devices
var mvisits = Analytics.Data.Ga.get(tableId, startDate, endDate, 'ga:deviceCategory==mobile').rows.toString();
mvisits = mvisits;
I would be grateful for any assistance and please let me know if you require any more code from my script.
Thanks in advance.
My app script is a bit rusty but your problem is your == the dimension field is just a column you want to select.
var tableId = 'ga:' + profileId;
var metric = 'ga:visits';
var options = {
'dimensions': 'ga:deviceCategory',
'filters': 'ga:deviceCategory==mobile'
};
var report = Analytics.Data.Ga.get(tableId, startDate, endDate, metric,
options);
What you need to do is add some filters instead. If you think of this like a relational database this would be like saying
select deviceCategory, visits
from tableId
where devicecategory == mobile
Remember you need to add a metric.
Example: shamelessly ripped from Analytics service page.

Using Meteor, is it possible to have "dynamic routes?"

sorry, I'm new to webdev and Meteor and I'm not quite sure of the correct terminology. I am using Meteor-Router to create routes in my Meteor app.
I'm trying to create a test restaurant app, so an entry in my database might be:
name: "Kentucky Fried Chicken"
type: "Fast Food"
On the main page of the app, you see a list of restaurants. But the user can click on any item on that list to get to a more detailed page.
I would rather that the urls don't look like:
/restaurant/123
but more so like:
/fast-food/kentucky-fried-chicken
/japanese/sushi-r-us
/italian/some-italian-restaurant-name
Is this possible to do with Meteor & Meteor-Router? Thank you!
Btw, right now my routes are very simple:
Meteor.Router.add({
'/': 'home',
'/admin': 'admin',
'/403': 'unauthorized'
});
You can use more complex routes than the one you're using now, like this:
Meteor.Router.add({
'/:type/:restaurant': function(type, restaurantName) {
var restaurant = Retaurants.findOne({type: type, name: restaurantName});
Session.set('restaurantFromUrl', restaurant);
// Now your restaurant is in the "restaurantFromUrl" Session
return 'restaurantPage';
}
});
The /:type and /:restaurant will be passed into the callback and be whatever you set them to in your URL. Oh, and you might want to add a /show-restaurant/type/name/ also, else all urls (that aren't set up in other routes) that match the patter "/whatever/url" will try to get a restaurant.
Everything you need to know is here: https://github.com/tmeasday/meteor-router
Oh, and this is just an example. Haven't tested it but it should work.
Current route package for Meteor that most people use is: Iron Router

postal code to google map

I am a newbie in google map. I learn from google map documentation but I don’t found anything about postal code to google map. I only have a postal code to get the google map. If so can I get a map from postal code.
I also find in google for tutorials for that but I don't found anything. If you have a useful code or tutorial, please help me.
You first need to get the latitude/longitude from address/postcode. There is a Google GeoCodeing API for getting longitude and lattitude from address and possibly post code. It got some usage limits though. Have a look
http://code.google.com/apis/maps/documentation/geocoding/
Once u get the long/lat u can then feed these into google mapping api
E.g. Using the following javascript api
http://maps.google.com/maps/api/js?sensor=false
You can do
RenderMap(54.1109429427243, -3.197265625, 6, "resultsMapHome");
function RenderMap(lat, lng, zoomLevel, divName) {
    var position = new google.maps.LatLng(lat, lng);
    var options = {
        zoom: zoomLevel,
        center: position,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById(divName), options);
    map.setCenter(position);
}
I can't format the script as I am typing from my iPhone. I will reformat it later when I get to work.
http://maps.google.com
Put in the post code, zoom in / out until you have the position you'd like the map on your own website. Then click the 'link' button to the right of the search bar (looks like a chain). This gives you the appropriate code to put that map into your website.
Is that what you wanted? I couldn't understand your English very well.

Resources