javascript - tracker - ¿Mostrar datos de Google Analytics en mi sitio web?

how to add google analytics to my website (5)

Echa un vistazo a embeddedanalytics.com ( descargo de responsabilidad - trabajo con ellos ).

Esta es una solución simple pero poderosa diseñada para personas que no quieren tratar con aprender la API de GA y luego tener que vincularla con la visualización (por ejemplo, tablas / gráficos).

Básicamente, defina sus gráficos e incruste un fragmento de código donde desee que se muestre el gráfico. También admitimos mecanismos para que sea fácil de integrar en un CMS personalizado u otro portal web.

Estoy tratando de encontrar una manera de mostrar los datos recopilados de Google Analytics en mi sitio web. Estoy usando NopCommerce, y quiero mostrar esta información / estadísticas en una vista en la Sección de administración.

Puede haber muchas maneras de lograr esto, y después de buscar en la web, encontré algunos ejemplos utilizando JavaScript, pero no pude encontrar un buen tutorial para esto.

También he estudiado la integración de Google Analytics con C # y encontré este ejemplo: http://biasecurities.com/2012/02/using-the-google-analytics-api-with-asp-net-mvc/#comment-1310 Se puede descargar un proyecto de demostración desde GitHub aquí: https://github.com/jgeurts/Analytics-Example

Sin embargo, el proyecto de demostración no parece funcionar ya que la URL de Google ( https://www.google.com/analytics/feeds/accounts/default ) ya no está en uso.

Como uso una aplicación MVC, sería preferible que esto sucediera aplicando la lógica de Google Analytics dentro de un Controlador y mostrándolo en una vista. O algo así.

Google proporciona una herramienta de consulta para experimentar aquí, por lo que no debería ser difícil extraer datos de Google Analytics y mostrar los datos en el sitio web: https://ga-dev-tools.appspot.com/explorer/

¿Alguien ha podido mostrar con éxito los datos de Google Analytics en su sitio web?

En caso de que alguien más tenga el mismo problema, aquí está lo que hice y responde bastante a la pregunta.

Este es el código básico para un cliente API que accede a los datos de Google Analytics a través de su cuenta de servicio de Google. https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account

Para que esta aplicación funcione, debe tener varias cosas listas antes de comenzar a codificar.

* Cuenta de Google Analytics : una vez registrado, se genera un código de "rastreador" para que lo coloque en cada página web que desee rastrear. Es posible que no vea ninguna estadística de inmediato y pueden pasar hasta 24 horas antes de que se muestren las estadísticas en el Panel de Google Analytics.

Una Autorización OAuth (Clave API) con CLIENT_ID, CLIENT SECRET y CORREO ELECTRÓNICO (este no es su correo electrónico normal, sino un correo electrónico de cuenta de servicio que se crea para usted cuando realiza una Autorización OAuth). console.developers.google.com/

También se puede crear una clave de servidor aquí: console.developers.google.com/. También puedes crear una clave de navegador, no te has molestado con eso y no sabes lo que hace.

Finalmente necesitas una clave de certificado. Su aplicación solo podrá acceder a su cuenta de Google Analytics utilizando la clave y las credenciales. La clave es un archivo p.12 encriptado. Puede encontrar la clave en https://code.google.com/apis/console/ .

Aquí hay una guía para la clave: http://www.pimcore.org/wiki/display/PIMCORE/Setup+Google+Analytics+Reporting+with+OAuth2+Service+Accounts+(since+1.4.6)

Ahora que tiene todas las claves y credenciales que necesita, es hora de comenzar a buscar el código que vinculé en "1". Aquí está lo básico para ello nuevamente: https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account

Crea una aplicación de consola e implementa el código anterior.

Nota: no está realizando un "servicio Google Plus", por lo que tiene que cambiar esas partes para "AnalyticsService". Ir a administrar nuget e instalar paquetes:

Google Apis Core Library
Biblioteca de cliente de Google Apis
Biblioteca del cliente de Google Apis Auth
Biblioteca de Google Apis Analytics.v3
Google GData Client (Esto proporciona propiedades utilizadas para consultar datos, métricas, demensions, etc.)
Biblioteca de extensiones de Google GData
Analítica

Podría haber olvidado algo, pero aquí están los espacios de nombres que uso:

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Security.Cryptography.X509Certificates; using Google.Apis.Auth.OAuth2; using Google.Apis.Services; using Google.Apis.Analytics.v3;

Finalmente, aquí está algo de mi código. Tenga en cuenta que estoy creando un nuevo Analytics como se supone que es "nuevo ServiceAccountCredentials" como en el código de Google. Esa es la principal diferencia: ¿ recuperar datos de la API de Google Analytics con .NET, múltiples métricas?

Con esto puedo acceder y consultar datos de la cuenta de Google Analytics. La mejor parte es que no tiene que iniciar sesión en Google para esto, ya que la clave y las credenciales le dan acceso a los datos de la cuenta directamente.

Migraré este código a MVC ahora. Es posible que haga una actualización más adelante sobre cómo implementar este cliente de Analytics en Mvc.

Este documento explica cómo obtener tokens de Google Access y cómo usarlos para que los datos de Google Analytics se muestren en nuestros sitios web.

Ejemplo: Un ejemplo en vivo está disponible en

https://newtonjoshua.com

Nota: use la misma cuenta de Gmail para todos los pasos a continuación.

PASO 1: Configurar Google Analytics

Siga los pasos a continuación para configurar Google Analytics en su sitio web

Inicie sesión en su cuenta de Analytics.
Seleccione la pestaña Admin.
Seleccione una cuenta en el menú desplegable en la columna CUENTA.
Seleccione una propiedad del menú desplegable en la columna PROPIEDAD.
En PROPIEDAD, haga clic en Información de seguimiento -> Código de seguimiento.
Para recopilar datos, debe copiar y pegar el código de seguimiento de Analytics en el código fuente en cada página web que desee rastrear.
Una vez que tenga el fragmento de código de seguimiento de JavaScript para su propiedad, copie el fragmento exactamente sin editarlo.
Pegue el fragmento de código de seguimiento (sin alterar, en su totalidad) antes de la etiqueta de cierre </head> en cada página web de su sitio que desee rastrear.
Una vez que haya instalado satisfactoriamente el seguimiento de Analytics, puede tardar hasta 24 horas para que aparezcan en sus informes datos tales como información de referencia de tráfico, características del usuario e información de navegación.

Referirse a:

PASO 2: Obtener fichas

Proyecto de Google:

Para crear un proyecto de Google Cloud Platform, abra la Consola de desarrolladores de Google ( https://console.developers.google.com ) y haga clic en Crear proyecto.

Habilitar el acceso a la API de OAuth 2.0:

Su aplicación deberá acceder a los datos del usuario y ponerse en contacto con otros servicios de Google en su nombre. Utilice OAuth 2.0 para otorgar acceso a la API de su aplicación.

Para habilitar eso, necesitas un ID de cliente:

Abra la página de Credenciales de la Consola API de Google ( https://console.developers.google.com/apis/credentials ).
Desde el proyecto, desplegable y seleccione su proyecto.
Seleccione Crear credenciales y elija el ID de cliente de OAuth .
En Tipo de aplicación, seleccione Aplicación web , ingrese un Nombre y
configure las Restricciones al ingresar los orígenes de JavaScript , Redirigir los URI para que apunten al sitio web donde planea mostrar los datos y luego haga clic en Crear .
Tome nota de OAuth 2.0 client_id y client_secret . Los necesitará para configurar la interfaz de usuario.

Obtener el código de autorización:

Entrar en el navegador:

https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics.readonly&response_type=code&client_id= {{client_id}} & redirect_uri = {{redirect_uri}} & aprobación_prompt = force & access_type = fuera de línea

Serás redirigido a

{{redirect_uri}}? code == {{ permission_code }} #

Obtener token de actualización:

Envíe una solicitud POST, posiblemente a través de una consola REST a

https://www.googleapis.com/oauth2/v3/token?code= {{permission_code}} & client_id = {{client_id}} & client_secret = {{client_secret}} & redirect_uri = {{redirect_uri}} & grant_type = permission_code

Obtendrá una respuesta JSON con

{"refresh_token": refresh_token }

Puede usar el token de actualización para obtener el token de acceso para acceder a las API de Google.

Obtenga el token de acceso:

Enviar una solicitud POST a,

https://www.googleapis.com/oauth2/v3/token?client_id= {{client_id}} & client_secret = {{client_id}} & grant_type = refresh_token & refresh_token = {{refresh_token}}

Obtendrá un JSON con access_token en la respuesta.

{access_token: {{access_token}} }

Ejemplo:

var access_token = ''''; function getAccessToken(){ $.post(''https://www.googleapis.com/oauth2/v3/token'', { client_id: {{client_id}}, client_secret: {{client_secret}}, grant_type: ''refresh_token'', refresh_token: {{refresh_token}} }, function (data, status) { if (status === ''success'') { access_token = data.access_token; // Do something eith the access_token } else { console.error(status); } }); }

Comprobar la validez del token:

Enviar una solicitud POST a,

https://www.googleapis.com/oauth2/v1/tokeninfo?access_token= {{access_token}}

Ejemplo:

function checkValidity() { $.post(''https://www.googleapis.com/oauth2/v1/tokeninfo'', { access_token:{{access_token}} }).done(function (data, status) { if (status === ''success'') { console.debug(data.expires_in); var check = false; check = data.hasOwnProperty(''expires_in''); if (check) { // Token is valid } if (!check) { getAccessToken(); } } else { console.debug(status); } }) .fail(function (data) { console.error(data); getAccessToken(); }); }

Paso 3: Obtener datos

API incrustada:

La API integrada de GA es una biblioteca de JavaScript que le permite crear e integrar fácilmente su tablero de instrumentos de GA en su sitio web en cuestión de minutos.

Consulte https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started .

Explorador de consultas:

Visite Embed API Query Explorer y autorice

https://ga-dev-tools.appspot.com/query-explorer/

Seleccione la vista para la que desea obtener los datos.

Seleccione las métricas y dimensiones requeridas.

Ejemplo:

Obtenga datos de país (quiero saber la cantidad de usuarios que acceden a mi sitio web desde cada país).

Para obtener esos datos, seleccione las métricas como ''usuarios'' y las dimensiones como ''país''.

Haga clic en Ejecutar consulta .

Encontrará los datos analíticos para la consulta mostrada en una tabla.

Copie el URI de la consulta API . Y agregue access_token = {{access_token}} al URI.

Ejemplo:

https://www.googleapis.com/analytics/v3/data/ga?ids= {{ids}} & start-date = 2015-07-01 y end-date = today & metrics = ga% 3Ausers & dimensions = ga% 3A country & access_token = { {access_token}}

Envíe la solicitud POST a los URI para obtener los datos en su navegador.

Ejemplo:

function gaGetCountry() { $.get(''https://www.googleapis.com/analytics/v3/data/ga?'' + ''ids={{ids}}'' + ''start-date=2015-07-01&'' + ''end-date=today&'' + ''metrics=ga%3Ausers&'' + ''dimensions=ga%3Acountry&'' + ''sort=ga%3Ausers&'' + ''filters=ga%3Ausers%3E10&'' + ''max-results=50'' + ''&access_token='' + {{access_token}}, function (data, status) { if (status === ''success'') { // Display the Data drawRegionsMap(data.rows); } else { console.debug(status); } }); }

Paso 4: Mostrar datos

Ahora hemos recogido los datos. Finalmente tenemos que mostrarlos en nuestro sitio web.

" Mostrar datos en vivo en su sitio " es el título de Google Charts. Y eso es lo que vamos a hacer.

Consulte https://developers.google.com/chart/ .

El siguiente ejemplo dibujará un GeoChart en la div con id = ''countryChart''.

// Draw country chart function drawRegionsMap(data) { var head = data[0]; head[0] = ''Country''; head[1] = ''Users''; for (var i = 1; i < data.length; i++) { var d = data[i]; d[1] = Number(d[1]); } var chartData = google.visualization.arrayToDataTable(data); var options = { title: ''My Website is viewed from,'', domain: ''{{Country Code eg: IN for India}}'', tooltip: { textStyle: { color: ''navy'' }, showColorCode: true }, legend: { textStyle: { color: ''navy'', fontSize: 12 } }, colorAxis: { colors: [''#00FFFF'', ''#0000FF''] } }; var chart = new google.visualization.GeoChart(document.getElementById(''countryChart'')); chart.draw(chartData, options); }

Consulte https://newtonjoshua.com para ver el ejemplo anterior en acción.

Pasé un par de días rastreando Internet para obtener un código ASP.NET de muestra sin suerte. Utilicé el método de Koffe14 para la autenticación, y también el excelente ejemplo de análisis de ASP.NET de Linda Lawton .

He publicado el código en mi sitio web . No es MVC, pero podría ayudar a otras personas que necesitan obtener datos de Google Analytics en una página web ASP.NET mediante la API v3 de Google.

Recomiendo usar la nueva biblioteca de cliente de API de Google para .NET (actualmente en versión beta). La información sobre la API de Analytics se puede encontrar aquí. Tenga en cuenta que la Biblioteca de clientes para .NET (google-api-dotnet-client) reemplaza a la biblioteca de .NET para la API de datos de Google (google-gdata).

Desafortunadamente, aún no hay un código de muestra disponible en Google (consulte este problema ), pero esta pregunta sobre SO debería ayudar.

Si no desea iniciar sesión cada vez que accede a los datos de Analytics, puede usar la autorización OAuth 2.0 con acceso sin conexión . Sin embargo, debe otorgar acceso inicial a su aplicación web. Esto requiere que inicie sesión una vez, pero puede usar un token de actualización más adelante.