Saltar al contenido

¿Mostrar datos de Google Analytics en mi sitio web?

Después de tanto luchar pudimos hallar la solución de este inconveniente que muchos lectores de nuestro sitio han tenido. Si tienes algo que compartir no dejes de aportar tu información.

Solución:

En caso de que alguien más tenga el mismo problema, esto es lo que hice y prácticamente responde a la pregunta.

1.

Aquí está 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 “seguimiento” 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 EMAIL ADRESS (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 un navegador key, no me he molestado con eso y no sé lo que hace.

Finalmente necesitas un certificado key. Su aplicación solo podrá acceder a su cuenta de Google Analytics mediante el key y credenciales. los key es un archivo p.12 cifrado. Puedes encontrar el key en https://code.google.com/apis/console/.

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

2.

Ahora que lo tienes todo keys y las credenciales que necesita, es hora de comenzar a mirar el código que vinculé en “1”. Aquí está lo básico de nuevo: https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account

Cree una aplicación de consola e implemente el código anterior.

Nota: no está creando un “servicio Google Plus”, por lo que debe cambiar esas partes por “AnalyticsService”. Vaya a administrar nuget e instalar paquetes:

  • Biblioteca principal de Google Apis
  • Biblioteca cliente de Google Apis
  • Biblioteca cliente de autenticación de Google Apis
  • Biblioteca de Google Apis Analytics.v3
  • Cliente de Google GData (proporciona propiedades utilizadas para consultar datos, métricas, demensiones, 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;

3

Finalmente, aquí está parte de mi código. Tenga en cuenta que estoy creando un nuevo análisis 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 key y credenciales le da acceso a los datos de la cuenta directamente.

Migraré este código a MVC ahora. Podría hacer una actualización más adelante sobre cómo implementar este cliente de Analytics en Mvc.

Este documento explica cómo obtener tokens de acceso de Google 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: Utilice la misma cuenta de Gmail para todos los pasos a continuación.


PASO 1: Configure Google Analytics

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

  1. Inicie sesión en su cuenta de Analytics.
  2. Seleccione la pestaña Admin.
  3. Seleccione una cuenta del menú desplegable en la columna CUENTA.
  4. Seleccione una propiedad del menú desplegable en la columna PROPIEDAD.
  5. En PROPIEDAD, haga clic en Información de seguimiento -> Código de seguimiento.
  6. Para recopilar datos, debe copiar y pegar el código de seguimiento de Analytics en el código fuente de cada página web que desee rastrear.
  7. Una vez que tenga el fragmento de código de seguimiento de JavaScript para su propiedad, cópielo exactamente sin editarlo.
  8. Pegue su fragmento de código de seguimiento (inalterado, en su totalidad) antes del cierre etiqueta en cada página web de su sitio que desee rastrear.
  9. Una vez que haya instalado con éxito el seguimiento de Analytics, pueden pasar hasta 24 horas para que aparezcan en sus informes datos como la información de referencia de tráfico, las características del usuario y la información de navegación.

Referirse a:

  1. https://support.google.com/analytics/answer/1008080?hl=es
  2. https://analytics.google.com

PASO 2: Obtén tokens

Proyecto de Google:

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

Habilite 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, necesita una identificación de cliente:

  1. Abra la página de credenciales de la consola API de Google (https://console.developers.google.com/apis/credentials).
  2. Desde el proyecto, menú desplegable y seleccione su proyecto.
  3. Seleccione Crear credencialsy elige ID de cliente de OAuth.
  4. En Tipo de aplicación, seleccione Aplicación web, ingrese un Nombre y
  5. establezca las Restricciones ingresando Orígenes de JavaScript, Redirigir URI para señalar el sitio web donde planea mostrar los datos, y luego haga clic en Crear.

  6. Tome nota de OAuth 2.0 Identificación del cliente y client_secret. Los necesitará para configurar la interfaz de usuario.

Obtener el código de autorización:

Ingrese 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 & Approved_prompt = force & access_type = offline

Serás redirigido a

redirect_uri? code == Código de Autorización #

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=authorization_code & client_id =Identificación del cliente& client_secret =client_secret
& redirect_uri =redirect_uri& grant_type = código_autorización

Obtendrá una respuesta JSON con

“refresh_token”: refresh_token

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

Obtenga el token de acceso:

Envíe una solicitud POST a,

https://www.googleapis.com/oauth2/v3/token?client_id=Identificación del cliente
& client_secret =Identificación del cliente
& 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);
            
        );

Verificar la validez del token:

Envíe 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

Insertar API:

GA Embed API es una biblioteca de JavaScript que le permite crear e integrar fácilmente su panel 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 necesarias.

Ejemplo:

Obtener datos de países (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 de la consulta que se muestran en una tabla.

Copia el URI de consulta de 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&end-date=today&metrics=ga%3Ausers&dimensions=ga%3Apaís& 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 recopilado los datos. Finalmente tenemos que mostrarlos en nuestro sitio web.

Muestre 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 el 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.

Recomendaría utilizar la nueva biblioteca cliente de API de Google para .NET (actualmente en versión beta). Puede encontrar información sobre la API de Analytics aquí. Tenga en cuenta que la biblioteca cliente para .NET (google-api-dotnet-client) reemplaza a la biblioteca .NET para la API de datos de Google (google-gdata).

Desafortunadamente, todavía no hay un código de muestra disponible de 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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *