Ajouter l’autocompletion sur votre moteur Google Custom Search Engine

Tags: Google Search, Recherche, Webdesign, Webworker
Posté dans Logiciels & Webwares, Webworker par Lionel Roux le 30 oct 2008

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/javascript\n\n");

	?>
	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

Cet article vous a plu ?

Commenter

| Recevez les mises à jour

| Partager :

Répondre Citer #1 par Pierre Collenot le 13 avril 2009 - 02:00

Bonjour

Je ne sais pas si je frappe à la bonne porte, mais je tente quand même
Je recherche un script qui permettrait de faire ceci :
Lorsqu’un visiteur arrive sur mon site à partir d’un moteur de recherche, je souhaiterais pouvoir afficher quelque chose du genre :
« Bonjour, vous êtes arrivé dans cette page après avoir saisi le mot ou l’expression « abcdefg hijklm » dans votre moteur de recherche favori. »
« Pour améliorer le résultat de votre recherche, je vous conseille de saisir cette expression « abcdefg hijklm » dans le moteur de recherche interne du site (Google Custom Search), car il est très possible que d’autres pages de ce site répondent également à votre demande. »
L’idéal serait même que l’expression « abcdefg hijklm » vienne s’inscrire toute seule dans la fenêtre du Google Custom Search. Ainsi, le visiteur n’aurait plus qu’à cliquer sur le bouton d’envoi pour avoir la liste des pages du site où cette expression « abcdefg hijklm » est identifiée par Google Custom Search

Répondre Citer #2 par Lionel Roux le 13 avril 2009 - 17:41

Bonjour Pierre, je pense que j’ai ce qu’il te faut.

Sur un blog Wordpress, il y a un plugin qui fait exactement cela. Tu peux t’inspirer de celui-ci si tu n’utilises pas Wordpress: WP-Greet-box ici

Sinon ce n’est pas comliqué, il faut récupérer le referer dans le header HTTP et pour les mots clés, il te faut décortiquer l’url passé ds ce champ via le paramêtre « q » (search?q=tesmotsclés).

J’espère avoir répondu, sinon n’hésites pas.
@ bientôt

Répondre Citer #3 par Yves le 17 novembre 2009 - 19:26

Bonjour,

Je n’ai pas du tout le même rendu de fenêtre avec les mots clés, y-a-t’il un css qui manque dans le zip?

Merci!

Répondre Citer #4 par Lionel Roux le 17 novembre 2009 - 19:45

A priori tous les styles sont dans le fichier CSS jquery.autocomplete.css fournit dans le zip. Les captures ont été faites avec un Mac, donc il se peut qu’il y ait des différences.

Pas encore de trackback.

Websourcing.fr » Actualités, Web, Logiciels et Fun