Comment exploiter la mise en cache du navigateur pour Google Analytics

ga

Pour améliorer la note de ce site dans PageSpeed Insights, il ne me restait plus qu’à optimiser Google Analytic.

Il est malheureusement impossible d’optimiser les en-têtes d’un fichier hébergé à l’extérieur de son serveur. Qu’à cela tienne, j’ai donc décidé d’héberger moi-même Google Analytics.

1. Copier le script sur votre serveur

Pour commencer, créer un fichier JavaScript sur votre serveur, comme par exemple, “analytics.js”. Puis copier la totalité du fichier disponible à cette adresse google-analytics.com/analytics.js et coller le dans votre nouveau fichier.

2. Changer votre code Google Analytics

Voici le code par défaut de Google Analytics:

<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-xxxxxxxx-1', 'auto');
 ga('send', 'pageview');

</script>

Vous devez changer le chemin actuel ‘//www.google-analytics.com/analytics.js’ pour celui sur votre serveur.

Voici le résultat pour mon site:

<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','<?php echo get_bloginfo("template_directory"); ?>/js/analytics.js','ga');

 ga('create', 'UA-xxxxxxxx-1', 'auto');
 ga('send', 'pageview');

</script>

3. Vérifier le fonctionnement

Rendez-vous dans la section “Temps réel” de Google Analytics pour vérifier si votre code de suivi fonctionne toujours.

4. Automatiser la mise à jour du fichier (Optionnel)

C’est bien beau tout ça, mais si Google fait des modifications à son script, nous n’aurons pas les mise à jour.

Vous pourriez copier/coller le script régulièrement, mais ce n’est pas vraiment une option valable…enfin pour moi.

Voici un script PHP gracieuseté de Tips4php pour automatiser cela.

// script to update local version of google analytics script

// Remote file to download
$remoteFile = 'http://www.google-analytics.com/ga.js';
$localfile = '/var/www/example.com/static/local-ga.js';

// Connection time out
$connTimeout = 10;
$url = parse_url($remoteFile);
$host = $url['host'];
$path = isset($url['path']) ? $url['path'] : '/';

if (isset($url['query'])) {
  $path .= '?' . $url['query'];
}

$port = isset($url['port']) ? $url['port'] : '80';
$fp = @fsockopen($host, '80', $errno, $errstr, $connTimeout );
if(!$fp){
  // On connection failure return the cached file (if it exist)
  if(file_exists($localFile)){
    readfile($localFile);
  }
} else {
  // Send the header information
  $header = "GET $path HTTP/1.0\r\n";
  $header .= "Host: $host\r\n";
  $header .= "User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6\r\n";
  $header .= "Accept: */*\r\n";
  $header .= "Accept-Language: en-us,en;q=0.5\r\n";
  $header .= "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\r\n";
  $header .= "Keep-Alive: 300\r\n";
  $header .= "Connection: keep-alive\r\n";
  $header .= "Referer: http://$host\r\n\r\n";
  fputs($fp, $header);
  $response = '';

  // Get the response from the remote server
  while($line = fread($fp, 4096)){
    $response .= $line;
  }

  // Close the connection
  fclose( $fp );

  // Remove the headers
  $pos = strpos($response, "\r\n\r\n");
  $response = substr($response, $pos + 4);

  // Return the processed response
  echo $response;

  // Save the response to the local file
  if(!file_exists($localFile)){
    // Try to create the file, if doesn't exist
    fopen($localFile, 'w');
  }

  if(is_writable($localFile)) {
    if($fp = fopen($localFile, 'w')){
      fwrite($fp, $response);
      fclose($fp);
    }
  }
}

La seule modification à apporter est de changer le chemin d’accès de la variable “$localfile”. Attention: de prendre le chemin absolut de votre serveur.

$localfile = '/var/www/bulledev.com/wp-content/themes/bulledev_v7/_/js/analytics.js';

5. Créer un Cron Job (Optionnel)

Pour terminer, il est possible de configurer un Cron Job dans votre Cpanel, avec WordPress ou bien d’utiliser simplement un service externe comme Setcronjob qui s’occupera d’appeler votre script une fois par jours/semaine, c’est comme vous voulez.

Mise à jour (6 juin 2016)
Il est maintenant possible d’utiliser l’extension Host Analytics.js Locally qui fera tout cela pour vous automatiquement.