Implémenter Google Analytics API dans votre site

14 juin 2018 - : Javascript PHP API - : Pas de commentaire

Implémenter Google Analytics API dans votre site

Je ne vais pas traiter ici l'intégration du code Javascript de Google Analytics pour le suivi de votre site, mais l'intégration de l'API Google Analytics afin d'afficher les statistiques de Google Analytics dans votre site (partie administration), comme par exemple dans l'image ci-dessous.

Image des statistiques

Les pré-requis

Avant de nous lancer dans l'intégration de ces statistiques dans notre site, il faut :

Création du compte de service

Pour pouvoir vous connecter de façon transparente à l'API de Google Analytics, il sera nécessaire de configurer un compte de service sur le projet correspondant à votre site. Ceci vous évitera de devoir vous authentifier auprès de Google à chaque fois que vous voudrez consulter vos statistiques.

1. Le projet

Avant de pouvoir créer le compte de service, vous devez créer un projet sur la plateforme de Google.

Pour ce faire, allez sur la console des développeurs Google

En haut de l'écran, vous verrez la liste déroulante disant "Sélectionnez un projet". Cliquez dessus puis sur la fenêtre qui apparaît sur le lien "Nouveau projet".

Nouveau Projet

Remplissez le nom du projet, n'hésitez pas à modifier l'ID qui apparaît en dessous.

Au bout de quelques secondes, votre projet est créé.

Si il ne s'affiche pas de lui-même, n'hésitez pas à retourner sur le lien "Sélectionner un projet" et à le sélectionner manuellement.

2. Activer l'API Google Analytics

En haut de l'écran, vous verrez un bouton "Activer les API et les services".

Cliquez sur ce bouton et recherchez Analytics.

API Analytics

Vous pourrez sélectionner "Analytics API" (la deuxième sur l'écran ci-dessus) puis cliquer sur "Activer".

3. Créer les identifiants

Après avoir activé l'API, vous devez voir le bandeau ci-dessous vous demandant de créer des identifiants

Identifiants API Analytics

Ces identifiants permettront à l'API de vous authentifier.

Nous allons donc cliquer sur le bouton Créer des identifiants.

Sur l'écran ci-dessous, nous allons cliquer sur le lien "compte de service" (en jaune) pour ignorer cette étape et aller directement créer le compte dont nous avons besoin.

Identifiants API Analytics

Sur l'écran suivant, cliquer sur le bouton "Créer un compte de service"

Nous allons maintenant devoir nommer le compte et lui attribuer des rôles.

Comme sur l'écran ci-dessous, nous allons sélectionner les rôles Utilisateur dans Service Account et Lecteur dans Service Usage.

Compte de service

Une fois les champs remplis, valider en cliquant sur Créer.

4. Créer la clé

Quand le compte est créé, il nous reste à créer la clé, qui permettra l'authentification du compte depuis notre site.

Pour générer la clé, cliquer sur les 3 petits points en bout de la ligne du compte de service et cliquer sur Créer une clé.

Dans la fenêtre qui apparaît, choisir JSON et valider.

Le fichier JSON est proposé au téléchargement. Validez et conservez le précieusement !!

5. Ajouter le compte de service à votre compte Google Analytics

Le compte de service possède un identifiant qui se termine par .iam.gserviceaccount.com

Vous devez ajouter cet identifiant en tant qu'utilisateur de votre compte Google Analytics et lui donner les permissions de lecture.

Installer le client PHP pour l'API Google Analytics

Nous allons maintenant accéder à l'API Google Analytics depuis notre site.

J'ai choisi de traiter ce point avec PHP, mais d'autres méthodes sont listées sur le site officiel de Google.

Pour installer le client PHP, le plus simple est d'utiliser Composer. D'autres méthodes existent et sont référencées sur d'autres sites.

La ligne de commande pour l'installation est la suivante :

composer require google/apiclient:^2.0

Composer va installer le client PHP dans le dossier vendor/google

Copie de la clé d'API

Après avoir installé le client PHP, nous allons copier la clé d'API sur notre serveur.

ATTENTION : cette clé ne doit pas être accessible depuis un navigateur.

Si vous utilisez un framework MVC (Laravel, Symfony, par exemple), le dossier vendor n'est pas exposé, vous pouvez donc mettre votre clé dans vendor/google.

C'est ce qui sera fait pour la suite de cet article.

Accès à l'API

Nous allons accéder à l'API depuis un fichier PHP quelconque.

1. Initialisation de l'API et authentification

Avant de pouvoir accéder aux données, il est nécessaire d'initialiser l'API. Voici le code PHP permettant d'y parvenir (nous considérons que le client PHP est chargé, par un autoload de composer par exemple)

<?php
$analytics = initializeAnalytics(); // Initialisera l'API
$profile = getFirstProfileId($analytics); // Récupère le profil Google Analytics

// Fonction d'initialisation et d'authentification
function initializeAnalytics()
{
	// Précise où trouver la clé du compte de service
	$KEY_FILE_LOCATION = '/chemin/vers/vendor/google/Demo-Nouvelle-Techno-d0e404ce33f4.json';

	// Crée et configure le client
	$client = new Google_Client();
	$client->setApplicationName("Hello Analytics Reporting");
	$client->setAuthConfig($KEY_FILE_LOCATION);
	$client->setScopes(['https://www.googleapis.com/auth/analytics.readonly']);
	$analytics = new Google_Service_Analytics($client);
	return $analytics;
}

// Récupère le profil Google Analytics
function getFirstProfileId($analytics) {
  // Récupère la liste des comptes
  $accounts = $analytics->management_accounts->listManagementAccounts();

  if (count($accounts->getItems()) > 0) {
    $items = $accounts->getItems();
    $firstAccountId = $items[0]->getId();

    // Récupère la liste des propriétés
    $properties = $analytics->management_webproperties
        ->listManagementWebproperties($firstAccountId);

    if (count($properties->getItems()) > 0) {
      $items = $properties->getItems();
      $firstPropertyId = $items[0]->getId();

      // Récupère la liste des vues
      $profiles = $analytics->management_profiles
          ->listManagementProfiles($firstAccountId, $firstPropertyId);

      if (count($profiles->getItems()) > 0) {
        $items = $profiles->getItems();

        // Retourne l'ID de la première vue
        return $items[0]->getId();

      } else {
        throw new Exception('No views (profiles) found for this user.');
      }
    } else {
      throw new Exception('No properties found for this user.');
    }
  } else {
    throw new Exception('No accounts found for this user.');
  }
}

2. Récupérer les informations

Je ne vais pas détailler toutes les informations qui peuvent être récupérées par l'API, mais voir quelques exemples concrets. Le premier concerne le nombre de sessions.

La fonction ci-dessous interroge l'API et lui demande de retourner le métrique choisi pour les 30 derniers jours

function getResults($analytics, $profileId, $metric) {
   return $analytics->data_ga->get(
	'ga:' . $profileId, // Précise le profil Google Analytics à utiliser
	'30daysAgo', // Précise la date de début
	'today', // Précise la date de fin
	'ga:'.$metric // Précise le métrique utilisé (session, users...)
   );
}

Nous allons coupler cette fonction à une autre qui se chargera de l'affichage

function printResults($results) {
    if (count($results->getRows()) > 0) {
    	$rows = $results->getRows();
	$valeur = $rows[0][0];
	return $valeur;
  } else {
	return "Pas de résultat.\n";
  }
}

L'utilisation de ces fonctions se fera à l'emplacement souhaité par le code suivant

$results = getResults($analytics, $profile, 'users'); // Récupère le nombre d'utilisateurs des 30 derniers jours
echo printResults($results); // Affiche l'information

Si nous souhaitons afficher un graphique, nous allons devoir mélanger PHP et Javascript.

PHP servira à traiter les données, Javascript à les afficher.

Nous devons d'abord avoir un endroit où afficher notre graphique. Nous allons donc créer une DIV vide qui l'accueillera

<div id="visites" style="height: 400px; padding:0;">

Ensuite, nous allons récupérer les données en PHP

// Cette ligne fait appel à la fonction ci-dessous et demande à récupérer les pages vues, les utilisateurs et les sessions
$results = getChartResults($analytics, $profile, 'ga:pageviews,ga:users,ga:sessions');

// Fonction qui récupère les informations nécessaires pour le graphique
function getChartResults($analytics, $profileId, $metric) {
	return $analytics->data_ga->get(
		'ga:' . $profileId,
		'30daysAgo',
		'today',
		$metric,
		array(
			'dimensions'=>'ga:Date'
		)
	);
}

Après avoir récupéré les données en PHP, il va falloir les afficher sous forme de graphique. Nous allons utiliser Google Charts pour cet exemple.

Cette partie fait intervenir du PHP imbriqué dans le Javascript. En effet, les données obtenues en PHP doivent être utilisées en javascript. Il est donc nécessaire d'imbriquer les deux langages.

Tout d'abord, mettons en forme les données récupérées en PHP pour les rendre compatibles avec Javascript

// Cette fonction crée le tableau (json) qui pourra être lu par le javascript
function buildChartArray($results){
	if (count($results->getRows()) > 0) {
		$rows = $results->getRows(); // On compte les lignes
		$array=[["Date","Pages Vues","Visiteurs","Visites"]]; // Initialisation du tableau avec les nomn des "colonnes"
		foreach($rows as $date){ // Parcours des dates
			$datejour = substr($date[0],-2,2)."/".substr($date[0],-4,2)."/".substr($date[0],0,4); // On formatte la date (pour être joli à l'affichage)
			array_push($array,[$datejour,(int)$date[1],(int)$date[2],(int)$date[3]]); // On ajoute la date et les données du jour au tableau
		}
		$js_array=json_encode($array); // On encode le tout en json
		return $js_array; // On le retourne
	} else {
		return "Pas de résultat.\n";
	}	
}

Puis utilisons les dans notre javascript pour dessiner le graphique

// Chargement de Google Charts
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
	google.charts.load('current', {'packages':['corechart']});
	google.charts.setOnLoadCallback(drawChart);
	function drawChart() {
		// Sur la ligne ci-dessous, nous faisons un echo en php (code court) du json retourné par la fonction php buildChartArray
		var data = google.visualization.arrayToDataTable(<?= buildChartArray($results); ?>);
		// Ci-dessous les options du graphique
		var options = {
			curveType: 'function',
			series: {
				0: {targetAxisIndex:0},
				1:{targetAxisIndex:1},
				2:{targetAxisIndex:1}
			},
			hAxis : { 
				textStyle : {
					fontSize: 10, // or the number you want
					fontName: 'Nunito'
				}
			},
			vAxes: {
				0: {
					gridlines: {color: 'transparent'},
					textStyle : {
						fontSize: 10, // or the number you want
						fontName: 'Nunito'
					}
				},
				1: {
					gridlines: {color: 'transparent'},
					textStyle : {
						fontSize: 10, // or the number you want
						fontName: 'Nunito'
					}
				},
			},
			legend: {
				position: 'bottom',
				textStyle : {
					fontSize: 10, // or the number you want
					fontName: 'Nunito'
				}
			}
		};
		// Nous précisons où le graphique doit être "injecté"
		var chart = new google.visualization.LineChart(document.getElementById('visites'));
		// Nous dessinons le graphique
		chart.draw(data, options);
	}
</script>

Il y aurait de nombreux autres exemples d'application mais ils ne seraient que des dérivés de ces deux là.

Commentaires

Pas encore de commentaire

Laisser un commentaire