API Semrush : Afficher le positionnement Google de ses sites sur son site Internet en javascript

Pour un référenceur, il est intéressant d’afficher sur son site officiel le positionnement des sites Internet que l’on référence pour prouver ses compétences.

Comme pas mal de référenceurs, j’avais commencé à faire ce type de statistiques à la main : je relevais grâce à mes logiciels de vérification les positionnements de mes sites, et venais modifier la page répertoriant mes résultats une fois par mois… Vous imaginez un peu le travail lorsque vous commencez à répertorier une petite dizaine de sites Internet… J’ai donc cherché à automatiser tout ça.

Semrush, qui est un outil de veille concurrentielle et de vérification de positionnement, propose une API permettant d’afficher des informations venant de sa base de données. Étant un utilisateur de Semrush, je me suis tout de suite plongé dans son API pour voir ce qui était possible de faire en matière d’affichage. Il s’est avéré que toutes les informations que je souhaitais afficher étaient contenues dans la base de données de Semrush.

Je vous propose donc de découvrir comment afficher sur son site officiel les positionnements de ses propres sites Internet avec l’API Semrush : chaque site référencé et dont on veut afficher le positionnement génère un tableau. Dans ce tableau s’affichent les informations principales sur les mots clés qui génèrent des visites sur le site en question. En voici un exemple :

Utilisation de l'API Semrush pour afficher ses positionnements Google sur son site

Nous allons avoir besoin de l’API Semrush, mais aussi d’un peu de Javascript, et plus précisément de jQuery pour le remplissage automatique du tableau.

Remarque

L’affichage des données pourrait se faire uniquement en PHP sans passer par du Javascript. Le problème que j’ai rencontré était d’avoir une structure Drupal derrière mon site : il était tellement plus simple de passer par une génération Javascript que de modifier le template Drupal que je n’ai pas hésité. De plus, une génération PHP aurait ralenti le chargement de la page, contrairement à une génération Javascript qui commence lorsque la page a terminé de se charger.

Pré-requis

Un compte Semrush

Forcément, qui dit API, dit forcément abonnement. Si vous êtes intéressé par cet article, c’est qu’il y a de fortes chances que vous ayez déjà un compte premium Semrush. Sinon, il serait dommage de s’y inscrire uniquement pour faire apparaître ses résultats sur son site. Dans tous les cas, pour un référenceur professionnel ou une petite agence Web, l’abonnement de $69.95 / mois suffira amplement à avoir suffisamment d’unités d’API (car chaque donnée renvoyée par Semrush coûte un certain nombre d’unités d’API, je détaillerai cela par la suite).

Récupérer sa clé API Semrush

Comme je l’ai dit précédemment, chaque interrogation de la base de données de Semrush coûte des unités d’API. Vous aurez donc besoin de vous munir de votre clé API à chaque fois que vous voudrez que Semrush vous renvoie des résultats. Pour l’obtenir, il vous suffit d’aller sur le site réservé à l’API. Vous verrez alors…

Identification de la clé d'API Semrush

Copiez cette clé à un endroit que vous retrouvez facilement : on va l’utiliser quelques fois 🙂

Inclure jQuery

Le framework javascript jQuery est tellement utilisé dans les templates de CMS que vous l’avez probablement déjà inclus dans votre page. S’il n’est pas déjà présent sur la page où vous allez afficher vos positionnements, la méthode la plus simple est de l’inclure depuis des serveurs de Google. Ajoutez simplement cette ligne dans votre code HTML :

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Nous avons tout ce qu’il nous faut. Commençons !

Les requêtes Semrush

Une requête Semrush est tout simplement une URL contenant des paramètres GET. Voici la requête que j’utilise dans mon cas :

http://fr.api.semrush.com/?action=report&amp;type=domain_organic&amp;domain=alexandre-giannelli.com&amp;key=CLE_D_API&amp;display_offset=0&amp;export=api&amp;export_columns=Ph,Po,Nq,Co,Nr,Ur&amp;display_sort=Tr&amp;display_filter=-|Po|Gt|9|-|Co|Lt|0.1

Vous pouvez tester les informations rendues par cette URL en remplaçant CLE_D_API par votre propre clé dans la fenêtre de votre navigateur.

Le fait d’avoir renseigné http://fr.api.semr... cible la base de données française de Semrush. Vous pouvez par exemple changer ce paramètre en ca pour appeler la base de données canadienne.

Pour les novices

Les paramètres passés dans une URL, de type GET, se situent entre le ? et sont séparés par des &. Chaque paramètre est constitué de son nom (action étant le nom du premier paramètre), suivi du signe = et de sa valeur (report pour le premier paramètre).

Voici la même URL en plus lisible :

http://fr.api.semrush.com/
?action=report
&type=domain_organic
&domain=alexandre-giannelli.com
&key=CLE_D_API
&display_offset=0
&export=api
&export_columns=Ph,Po,Nq,Co,Nr,Ur
&display_sort=Tr
&display_filter=-|Po|Gt|9|-|Co|Lt|0.1

Pour que vous puissiez modifier les paramètres en fonction de ce que vous voulez afficher, détaillons un peu chacun des paramètres :

  • action : il s’agit ici d’un rapport de données ; on met donc report.
  • type : nous allons lister les mots clés organiques (par opposition aux mots clés provenant des annonces publicitaires Adwords par exemple) ; on indique domain_organic.
  • domain : on renseigne le domaine concerné. À noter qu’il est impossible de cibler les résultats provenant d’un sous-domaine. J’ai tout de même réussi à le faire en «bricolant». Si vous êtes intéressé par cette technique, n’hésitez pas à me le demander dans les commentaires.
  • key : votre clé d’API.
  • display_offset : nombre de résultats à sauter en début de liste ; on peut sauter par exemple les 3 premiers résultats en mettant 3 comme valeur.
  • export : aucune question à se poser, on renseigne api.
  • export_columns : paramètre très important, il détermine les données dont vous avez besoin. Chaque donnée s’exprime par deux lettres séparés par des virgules. Vous en avez un nombre considérable, aussi je vous invite à voir la liste donnée par Semrush si vous en voulez d’autres (attention : dans la liste, pas tous les paramètres peuvent être utilisées dans cette requête). Celles que j’ai utilisées sont :
    1. Ph : le mot clé
    2. Po : la position Google sur ce mot clé
    3. Nq : le nombre approximatif de fois que ce mot clé a été tapé mensuellement (moyenne sur 12 mois)
    4. Co : l’indice de concurrence provenant de Google Adwords
    5. Nr : le nombre de résultats que renvoie Google pour ce mot clé
    6. Ur : l’URL exacte que l’on cherche dans les SERP
  • display_sort : vous pouvez indiquer ici le tri à effectuer sur ces données : dans quel ordre les voulez-vous ? La valeur de ce paramètre doit être constitué d’une des données possibles pour le paramètre export_columns suivi de _desc si vous voulez que ce tri se fasse dans l’ordre décroissant, rien sinon. Dans notre exemple, display_sort=Tr permet de trier les résultats selon le ratio du nombre de visiteurs qui sont arrivés sur l’URL à partir du mot clé sélectionné par rapport au nombre de visiteurs du site. En bref, les mots clés ayant rapporté le plus de visites arriveront en premier.
  • display_filter : enfin, vous pouvez ajouter des filtres qui permettent de choisir seulement certaines données. Chaque filtre est constitué de :
    1. un signe – ou + selon si vous désirez supprimer ou ajouter des données par le filtre
    2. les données concernées par le filtre, toujours symbolisées par les deux lettres de tout à l’heure
    3. l’opération  : Eq (Égal à), Gt (Plus grand que), Lt (Plus petit que), Bw (Commence par), Ew (Se termine par) ou Co (Contient)
    4. la valeur du filtre

    Chacune des 4 données ci-dessus doit être séparé par des |. Notons qu’il est possible d’indiquer plusieurs filtres à la suite en utilisant le | comme séparation.

    Voyons immédiatement notre exemple pour comprendre tout ça. L’URL comprenait deux filtres :
    -|Po|Gt|9
    et
    -|Co|Lt|0.1
    avec un | entre les deux. Le premier filtre supprime les données dont la position (sur Google) est supérieure à 9, de manière à ne garder que les mots clés qui affichent un site en première page des SERP. Le deuxième filtre supprime les données dont l’indice de concurrence Adwords est inférieur à 0.1, afin d’éviter que des mots clés «inutiles» ou de trop longue traîne polluent les résultats.

Si vous avez testé cette URL avec votre clé d’API, vous avez peut-être remarqué que les résultats sont retournés sous forme de liste (équivalent au format CSV).

Résultats de l'API Semrush en Json

La consommation en unités d’API

Sachez que chaque ligne qui est envoyée par Semrush consomme 10 unités d’API. Avec un compte Pro, votre compte contient 200 000 unités. Vous pourrez donc afficher 20 000 résultats / mois, avec un maximum de 3 000 par jour. Par exemple : si votre page affiche les infos d’un total de 50 mots clés, chaque internaute qui affichera la page vous coûtera 500 unités d’API. Votre quota de 200 000 unités d’API mensuelles sera donc vide au bout de 400 chargements de page. Si besoin, vous pourrez acheter 20 000 unités d’API pour $1.

Récupération des données

La récupération en PHP

Il serait possible de récupérer les données directement en Javascript. Mais le Javascript est lisible dans le code source de la page ; votre clé étant affichée lors de la requête Semrush, n’importe qui pourrait la récupérer et s’en servir à votre insu. Nous allons donc passer par un fichier PHP dont le code est, lui, invisible. J’ai personnellement créé un dossier semrush à la racine de mon site dans lequel j’ai placé le fichier
domain_organic.php. Ce fichier sera appelé par le Javascript et devra nous retourner les données en fonction du domaine qui nous intéresse. Ce domaine sera communiqué au fichier PHP par un paramètre GET. L’appel réalisé en Javascript sera en fait équivalent à semrush/domain_organic.php?site=domaine.com.

J’ai basé domain_organic.php sur le fichier PHP fourni par Semrush. Commençons par récupérer le domaine indiqué dans la variable GET nommé site. S’il n’y a pas de paramètre renseigné, on stoppe l’exécution du fichier :

<?php
if( isset( $_GET['site'] ) && $_GET['site'] != "" ){
    $bool = false;
}
else die();

$query          = $_GET['site'];

Le domaine concerné est stocké dans la variable $query que nous allons utiliser par la suite. Maintenant, on renseigne tous les paramètres qui serviront à envoyer la requête à Semrush, et à on colle la fonction de récupération des données fournie par Semrush : performRequest.

/**
 ***************** Paramètres de la requête
 **/


$type           = 'domain_organic';
$request_type   = 'domain';
$api_key        = 'CLE_D_API';
$db             = 'fr';
$offset         = 0;
$export_columns = 'Ph,Po,Nq,Co,Nr,Ur';
$display_sort = 'Tr';
$display_filter = '-|Po|Gt|9|-|Co|Lt|0.1';
$ip_address     = $_SERVER['SERVER_ADDR'];

// Nombre de résultats / mots clés à retourner par site
$limit = 5;

/**
 ***************** Insertion des paramètres dans un tableau
 **/


$params = Array
(
    'request_type'      => $request_type,
    'type'              => $type,
    'q'                 => urlencode ( $query ),
    'key'               => $api_key,
    'uip'               => $ip_address,
    'db'                => $db,
    'limit'             => $limit,
    'offset'            => $offset,
    'export_columns'    => $export_columns
);

/**
 ***************** Fonction de récupération des données
 **/


function performRequest ( $params )
{
    $url                 = 'http://' . $params [ 'db' ] . '.api.semrush.com/?action=report&type=' . $params [ 'type' ] . '&' . $params [ 'request_type' ] . '=' . $params [ 'q' ] . '&key=' . $params [ 'key' ] . '&display_limit=' . $params [ 'limit' ] . '&display_offset=' . $params [ 'offset' ] . '&export=api&export_columns=' . $params [ 'export_columns' ] . '&display_sort=' . $params[ 'dislay_sort' ] . '&display_filter=' . $params['display_filter'];
    $cUrl                = curl_init            ();
                           curl_setopt          ( $cUrl, CURLOPT_URL, $url );
                           curl_setopt          ( $cUrl, CURLOPT_RETURNTRANSFER, 1 );
                           curl_setopt          ( $cUrl, CURLOPT_TIMEOUT, 30 );
                           curl_setopt          ( $cUrl, CURLOPT_HTTPHEADER, array ( 'X-Real-IP', $params [ 'uip' ] ) );
    $answer              = curl_exec            ( $cUrl );
    if ( curl_getinfo ( $cUrl, CURLINFO_HTTP_CODE ) == 200 )
    {
                           curl_close           ( $cUrl );
        return $answer; // Return request results
    }
    elseif ( curl_errno ( $cUrl ) && curl_errno ( $cUrl ) != 28 )
    {
                           curl_close           ( $cUrl );
        return false;   // Error occured during request
    }
                           curl_close           ( $cUrl );
    return false;       // Request timed out
}

Mais les résultats qui seront obtenus si l’on utilise la fonction PHP performRequest seront en CSV. Or, il est beaucoup plus simple de manipuler du Json lorsqu’on affiche des données en Javascript. Nous n’allons donc pas retourner directement cette fonction, mais l’utiliser pour retourner les données en Json.

if ( false !== ( $result = performRequest ( $params ) ) )
{
    if ( preg_match ( "/^ERRORs[0-9]+s::[a-zA-Z0-9s]+/i", $result ) )
    {
        echo $result;
    }
    else
    {
        $data = explode ( "n", trim ( $result ) );
        $fields = explode ( ";", array_shift ( $data ) );

        $return = array();

        foreach( $data as $line )
        {
            $values = explode ( ";", $line, count($fields) );

            $line = array();

            foreach( $values as $key=>$value )
            {

                if( $key==4 )
                    $value = number_format( $value, 0, ',', ' ' );

                $line[$key] = $value;
            }

            $return[] = $line;
        }

        die(json_encode($return));

        }
}

Et pour que les données soient bien interprétées comme du Json, nous rajoutons cette ligne au début du fichier :

header( "Content-type: application/json" );

Lorsque nous demanderons à notre Javascript d’afficher les données, il appellera donc directement le fichier ./semrush/domain_organic.php, récupérera les informations en Json et les affichera (nous allons voir comment dans la prochaine partie). Cet appel étant en Javascript, l’utilisation du fichier domain_organic.php sera clairement affichée dans le code source. Un problème se pose donc : comment empêcher que quelqu’un n’utilise votre fichier domain_organic.php pour se faire ses propres stats ? Il suffit de limiter l’utilisation de votre fichier uniquement à vos domaines.
Pour ce faire, il suffit d’ajouter juste après la toute première ligne de code header( "Content-type: application/json" ); la liste de vos sites dans un tableau, et de vérifier si le paramètre GET qui contient le nom du site concerné fait bien partie de ce tableau. On va aussi modifier les conditions d’entrée dans le fichier qui ont été écrites tout au début du tutoriel :

$sites = array(
    "domaine1.com",
    "domaine2com",
    "domaine3com",
    "domaine4com",
    "domaine5com"
);
if( isset( $_GET['site'] ) && $_GET['site'] != "" ){
    $bool = false;
    foreach( $sites as $site ){
        if( $site == $_GET['site'] )
        $bool = true;
    }
    if( !$bool ) die();
}
else die();

$query          = $_GET['site'];

Voici le fichier domain_organic.php complet :

<?php

header( "Content-type: application/json" );

set_time_limit ( 0 );

$sites = array(
    "domaine1.com",
    "domaine2com",
    "domaine3com",
    "domaine4com",
    "domaine5com"
);
if( isset( $_GET['site'] ) && $_GET['site'] != "" ){
    $bool = false;
    foreach( $sites as $site ){
        if( $site == $_GET['site'] )
        $bool = true;
    }
    if( !$bool ) die();
}
else die();

$query          = $_GET['site'];

/**
 ***************** Paramètres de la requête
 **/


$type           = 'domain_organic';
$request_type   = 'domain';
$api_key        = 'CLE_D_API';
$db             = 'fr';
$offset         = 0;
$export_columns = 'Ph,Po,Nq,Co,Nr,Ur';
$display_sort = 'Tr';
$display_filter = '-|Po|Gt|9|-|Co|Lt|0.1';
$ip_address     = $_SERVER['SERVER_ADDR'];

// Nombre de résultats / mots clés à retourner par site
$limit = 5;

/**
 ***************** Insertion des paramètres dans un tableau
 **/


$params = Array
(
    'request_type'      => $request_type,
    'type'              => $type,
    'q'                 => urlencode ( $query ),
    'key'               => $api_key,
    'uip'               => $ip_address,
    'db'                => $db,
    'limit'             => $limit,
    'offset'            => $offset,
    'export_columns'    => $export_columns
);

/**
 ***************** Fonction de récupération des données
 **/


function performRequest ( $params )
{
    $url                 = 'http://' . $params [ 'db' ] . '.api.semrush.com/?action=report&type=' . $params [ 'type' ] . '&' . $params [ 'request_type' ] . '=' . $params [ 'q' ] . '&key=' . $params [ 'key' ] . '&display_limit=' . $params [ 'limit' ] . '&display_offset=' . $params [ 'offset' ] . '&export=api&export_columns=' . $params [ 'export_columns' ] . '&display_sort=' . $params[ 'dislay_sort' ] . '&display_filter=' . $params['display_filter'];
    $cUrl                = curl_init            ();
                           curl_setopt          ( $cUrl, CURLOPT_URL, $url );
                           curl_setopt          ( $cUrl, CURLOPT_RETURNTRANSFER, 1 );
                           curl_setopt          ( $cUrl, CURLOPT_TIMEOUT, 30 );
                           curl_setopt          ( $cUrl, CURLOPT_HTTPHEADER, array ( 'X-Real-IP', $params [ 'uip' ] ) );
    $answer              = curl_exec            ( $cUrl );
    if ( curl_getinfo ( $cUrl, CURLINFO_HTTP_CODE ) == 200 )
    {
                           curl_close           ( $cUrl );
        return $answer; // Return request results
    }
    elseif ( curl_errno ( $cUrl ) && curl_errno ( $cUrl ) != 28 )
    {
                           curl_close           ( $cUrl );
        return false;   // Error occured during request
    }
                           curl_close           ( $cUrl );
    return false;       // Request timed out
}


if ( false !== ( $result = performRequest ( $params ) ) )
{
    if ( preg_match ( "/^ERRORs[0-9]+s::[a-zA-Z0-9s]+/i", $result ) )
    {
        echo $result;
    }
    else
    {
        $data = explode ( "n", trim ( $result ) );
        $fields = explode ( ";", array_shift ( $data ) );

        $return = array();

        foreach( $data as $line )
        {
            $values = explode ( ";", $line, count($fields) );

            $line = array();

            foreach( $values as $key=>$value )
            {

                if( $key==4 )
                    $value = number_format( $value, 0, ',', ' ' );

                $line[$key] = $value;
            }

            $return[] = $line;
        }

        die(json_encode($return));

        }
}

L’affichage des données en Javascript

Il est temps d’afficher nos données !

Commençons tout d’abord par créer la fonction Javascript qui sera appelée à chaque chargement d’un tableau de données. Chaque tableau va charger le fichier domain_organic.php en y ajoutant le fameux paramètre GET qui contient le nom du site concerné. Les données sous forme Json sont ensuite transformées par la fonction en un tableau tout à fait lisible. Voici le script Javascript à placer directement dans la page :

<script>
function loadTable( selector, fields, site ){

    var url = "semrush/domain_organic.php";
    var table = jQuery(selector);
    var cols = fields.split("|");
   
    jQuery.ajax({
   
        url: url,
        type: "get",
        data: {site:site},
        dataType: "json",
        success: function( data ){
           
            table.empty();
           
            var thead = jQuery("<thead>").appendTo( table ).html("<tr></tr>");
            var tbody = jQuery("<tbody>").appendTo( table );
           
            for( var i=0; i<cols.length; i++ ){
               
                jQuery("<th>").appendTo( thead.find("tr") ).html( cols[i] );
            }
           
            for( var i=0; i<data.length; i++ ){
               
                var tr = jQuery("<tr>").appendTo( tbody );
               
                for( var j=0; j<cols.length; j++ ){
                   
                    jQuery("<td>").appendTo( tr ).html( data[i][j] );
                }
            }
        }
    })
}
</script>

Vous constaterez que la fonction loadTable prend 3 paramètres : l’id du tableau qui sera rempli par les données d’un site, les colonnes qui seront affichées (attention, il faut qu’elles concordent avec les données retournées par domain_organic.php) et le domaine concerné.

Nous pouvons maintenant créer les tableaux vides qui accueilleront bientôt les données de chaque site. Veillez à donner à chacun des tableaux un id parlant :

<table id="monPremierDomaine">
</table>

Il ne vous restera plus qu’à insérer un second script Javascript dans votre page qui ira charger, grâce à la fonction loadTable, chacun des tableaux, identifiés par leur id, rappelons-le.

<script>
jQuery(function(){
loadTable( "#monPremierDomaine", "Mot clé|Position Google.fr|Volume mensuel|Concurrence (Adwords)|Nombre de résultats sur Google.fr","domaine1.com" );
loadTable( "#monDeuxiemeDomaine", "Mot clé|Position Google.fr|Volume mensuel|Concurrence (Adwords)|Nombre de résultats sur Google.fr","domaine2.com" );
...
});
</script>

Vous avez enfin chargé vos données Semrush en dynamique ! Il ne vous reste plus qu’à attendre que de futurs prospects viennent admirer vos résultats 🙂 Bon business !

À propos de l'auteur

Alex GiannelliWebmaster à Marseille, Alex Giannelli travaille en tant qu'indépendant pour des TPE, PME et agences de communication depuis 2012. Spécialisé dans la création de site vitrine sous Wordpress et de boutique ecommerce sous Prestashop, ses compétences lui permettent aussi d'intervenir dans tout développement web. Formé chez Ranking Metrics, le référencement naturel et la gestion de campagnes Adwords font également partie de ses spécialités.Voir tous les articles par Alex Giannelli

  1. Emmanuel
    Emmanuel16/01/2015

    bonjour, j’aimerais savoir s’il vous plait, quel export_columns et display_filter utiliser pour trouver les concurrenrtsavec des mots de cles commun pour chaque site dans un pays donnees, par exemples sur la france ou sur google.fr et ne pas avoir de doublons dans la reponse des concurrents. Merci pour votre aide
    Cordialement

  2. Hak
    Hak24/06/2014

    Bravo pour ce tuto !!

    L’article est très intéressant.
    Est-il possible de faire une requete via l’API en imposant sois-même les mots clés pour vérifier son positionnement sur des mots clés que l’on a choisi nous même ? SI oui, pourrais-tu nous montrer comment car je n’ai pas trouvé de documentation à ce sujet.

    Merci !!!

    • Alexandre Giannelli
      Alexandre Giannelli25/06/2014

      Salut à toi ! 🙂

      Je ne pense pas que l’API Semrush permette de faire (directement du moins) un croisement entre une URL et son positionnement sur une expression clé. Maintenant, si ce mot clé est un mot clé sur lequel tu te positionnes bien, il sera dans les résultats que te retournera Semrush pour ton URL. Il te sera donc possible de capter ce résultat pour n’afficher que celui-ci. C’est de la bidouille, mais malheureusement, Semrush ne rend pas les choses faciles… 🙂

    Laisser une réponse