Ajouter l’autocompletion sur votre moteur Google Custom Search Engine

parFlorian publié le

Dans un précédent billet, j’avais expliqué comment intégrer les requêtes sur le moteur de recherche interne d’un site aux rapports de Google Analytics. Dans ce billet j’expliquais également qu’une alternative viable est d’intégrer un moteur fournit par Google directement: le Google Custom Search Engine (Google CSE).

Vous vous souvenez certainement qu’il y à quelques temps, Google a intégré l’auto-complétion et la suggestion de mots-clé à son moteur Google Search.
Souvent décriée comme envahissante, cette technologie permet cependant d’aider considérablement les internautes les moins aguéris.

Ce tutoriel va vous montrer comment intégrer la suggestion de mots-clé provenants des recherches sur votre site, à votre moteur CSE.

Il se base sur des choses simples et compréhensibles par le plus grand nombre et utilise PHP et JQuery. La technique fonctionnera d’autant mieux si votre site à un trafic conséquent car il se nourrit des recherches faîtes sur votre site.

Si vous n’avez pas ce trafic, vous pourrez toujours vous servir du flux de recherche d’un autre site qui le publie.

Avant tout assurez vous d’avoir installé CSE sur votre site et que celui-ci fonctionne.

Ajout de la fonctionnalité d’auto-complétion de JQuery.
Téléchargez le plugin d’auto-complétion développé par Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, et Jörn Zaefferer ici et dézippez le.

Copiez le répertoire jquery-autocomplete là où se trouve la page HTML ou PHP de votre moteur CSE.

Dans cette page, testez l’intégration du plugin en copiant le code suivant dans entre les balises <head> (ou faites le dans le header si vous utilisez PHP pour composer vos pages comme avec WordPress ou Dotclear).

	<script type="text/javascript" src="jquery-autocomplete/lib/jquery.js"></script>
	<script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
	<script type="text/javascript" src="jquery-autocomplete/demo/localdata.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css" />

	<script type="text/javascript">
	$().ready(function() {
		$("#cse_search").autocomplete(cities);
	});
	</script>

Comme vous pouvez le constater, cette fonction fait appel à un fichier de test (localdata.js) livré avec le plugin. Il s’agit d’une liste de villes. Peu importe, cela va juste nous aider à tester.

Modifiez aussi le code d’intégration de CSE comme ceci; ajouter l’id cse_search:

    <input type="text" id="cse_search" name="q" size="31" />

Ceci va permettre au script JQuery de savoir dans quel élément écrire son résultat.

Enregistrez, chargez votre page et tenter d’écrire un nom de ville. Normalement, l’auto-complétion devrait fonctionner.

Connexion du script à la source des mots-clés
Pour récupérer dynamiquement les mots-clés des requêtes les plus fréquentes, nous allons utiliser un petit bout de code PHP qui va transformer ces données en tableau Javascript comme le fichier llocaldata.js. Le navigateur Web pensera alors qu’il lit un fichier JS.

Pour ce faire, créez un fichier nommé searchdata.php et placez le dans le répertoire que vous avez créé précédemment (jquery-autocomplete).

Dans ce fichier écrivez le code PHP suivant:

	< ?php
		/* Ce script parse les requètes populaires issues de CSE et les formate en tableau Javascript. */

		$data = array();

		// Chargement du flux RSS CSE sous la forme XML
		// L'url est disponible dans les statistiques de votre compte CSE.
		if (!$s = simplexml_load_file("http://www.google.com/coop/api/003198751674731024891/cse/ovffo1orlum/queries?sig=__GaZojo71AtdDbVHqJ9KDPhwXAhk=")) {
			exit(); // ici vous devrez mieux gérer les erreurs éventuelles.
		}

		// on rempli le tableau
		foreach($s->item as $item) {
			$search_term = strtolower(trim($item->title));
			if (!in_array($search_term, $data)) {
				$data[] = $search_term;
			}
		}
		sort($data); // on trie le tableau

		// on formate en JS
		foreach($data as $search_term) {
			$js_data[] = """ . $search_term . """;
		}

		// on indique au navigateur qu'il s'agit de JS
		header("Content-type: text/javascriptnn");

	?>
	var searchdata = [< ?php echo implode($js_data, ", "); ?>];
//la fonction implode permet de créer un fichier .csv

Il est possible d’ajouter des termes propres que vous souhaitez mettre en avant. Pour ce faire il suffit d’initialiser le tableau avec des données (en minuscule).

		$data = array(
			"websourcing",
			"webworker",
			"webware"
		);
[/soucrcode]
</p>;

Assemblage.
Ensuite, vous devez faire en sorte que le script JS de la page du moteur de recherche aille piocher dans le tableau JS précédemment crée.

[sourcecode language="jscript"]
	<script type="text/javascript" src="jquery-autocomplete/searchdata.php"></script>

Il vous faut aussi modifier la fonction de recherche quelques lignes plus bas:

	$("#cse_search").autocomplete(searchdata);

Envoyez tout ça sur le serveur et cela devrait fonctionner.

Si la recherche est très utilisée, envisagez de mettre un petit cache dans la page, sans quoi les « hits » vers votre serveur vont exploser.

Voila, encore une astuce permettant de rendre son site plus convivial et professionnel. J’espère que ça pourra vous servir.

Crédits: Netuts

A lire également