Prestashop : ajouter un code de suivi des commandes Adwords

Lorsque vous choisissez d’effectuer une campagne Adwords pour mettre en avant votre site Prestashop, ce dans le but d’optimiser vos ventes, il vous est demandé par Google d’ajouter un code de suivi sur la page de récapitulatif de commande. Seul souci : ce récapitulatif est directement intégré dans les modules, ce de manière générale.

Techniquement, il existe des modules pour gérer cela, qui se greffe sur un hook précis dans votre Prestashop. Le module de référencement complet Ever SEO par exemple intègre nativement les codes Analytics, Search Console et Adwords. Voyons toutefois comment gérer cela manuellement.

Comme d’habitude, et comme Prestashop a beaucoup évolué entre la version 1.6 et 1.7, nous allons les différencier :

ajout d’un code Adwords pour Prestashop 1.6
ajout d’un code Adwords pour Prestashop 1.7

Et comme à chaque fois, je vous rappelle que vous êtes responsable des données de votre site, et qu’il faudra bien veiller à afficher les erreurs en cas de page blanche sur votre boutique.

Ajout d’un code Adwords pour Prestashop 1.6

La structure de Prestashop vous permet de réécrire les vues (les fichiers TPL) de chaque module, directement dans votre thème. Cela se révèle très utile afin de modifier et réagencer certains éléments de votre site.

Le code de suivi Prestashop ressemble à ceci :

Code de suivi Adwords

<!-- Google Code for Vente (2016) Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 0000000000;
var google_conversion_language = "fr";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "code de conversion";
var google_conversion_value = {$total_to_pay};
var google_conversion_currency = "EUR";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/0000000000/?value={$total_to_pay}.00&currency_code=EUR&label=codedeconversion&guid=ON&script=0"/>
</div>
</noscript>

/* <![CDATA[ */

var google_conversion_id = 0000000000;

var google_conversion_language = "fr";

var google_conversion_format = "3";

var google_conversion_color = "ffffff";

var google_conversion_label = "code de conversion";

var google_conversion_value = {$total_to_pay};

var google_conversion_currency = "EUR";

var google_remarketing_only = false;

/* ]]> */

</script>

</script>

</div>

</noscript>

Soyons des fainéants intelligents, comme tous bons développeurs, créons-nous un simple fichier TPL comportant le code de suivi Adwords (qui varie selon les comptes, j’ai réécrit ici certains éléments que vous fournira Google).

Notez au passage la variable google_conversion_value dans laquelle je précise une variable Smarty, à savoir le total à payer à payé. Je nomme donc mon fichier adwords.tpl, et je l’ajoute dans mon thème, à la racine de /themes/VotreTheme.

Dans chacun des fichiers payment-return.tpl de tous mes modules installés, à la fin du fichier, je n’ai donc qu’à ajouter ceci :

Appel du tpl

{include file="$tpl_dir./adwords.tpl"}

1	{include file="$tpl_dir./adwords.tpl"}

A ajouter donc dans chaque module de paiement sur la page de confirmation, en privilégiant l’ajout directement dans /themes/VotreTheme/modules/VotreModule/views/hook/payment_return (ou tout autre tpl de retour de paiement).

Attention ceci dit, le fichier de confirmation de commande peut varier selon les modules, notamment Paypal. Vous pouvez également inclure adwords.tpl dans le fichier de confirmation de commande de votre thème, mais encore une fois certains modules de paiement par carte bleue peuvent gérer leurs propres confirmation (ce qui retournera une erreur tôt ou tard suite à une mise à jour vers Prestashop 1.7).

Ajout d’un code Adwords pour Prestashop 1.7

Comme vous êtes sur Prestashop 1.7, avant même de continuer ce tutoriel, veillez à disposer d’un thème enfant. Si vous n’en avez pas, vous pouvez rapidement utiliser notre module gratuit de création de child theme, puis revenir ici pour poursuivre.

Imaginons un thème enfant sur une base Classic, votre thème sera donc Classic Child. Copiez le fichier themes/classic/templates/checkout/order-confirmation.tpl vers themes/classic-child/templates/checkout/order-confirmation.tpl.

Les variables smarty pour Prestashop 1.7 ne sont plus les mêmes qu’auparavant. Le code est donc désormais celui-ci, à ajouter soit au plus haut de votre fichier, soit au plus bas :

{literal}
<!-- Google Code for Vente (2016) Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 0000000000;
var google_conversion_language = "fr";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "code de conversion";
var google_conversion_value = {$order.totals};
var google_conversion_currency = "EUR";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/0000000000/?value={$order.totals}.00&currency_code=EUR&label=codedeconversion&guid=ON&script=0"/>
</div>
</noscript>
{/literal}

{literal}

/* <![CDATA[ */

var google_conversion_id = 0000000000;

var google_conversion_language = "fr";

var google_conversion_format = "3";

var google_conversion_color = "ffffff";

var google_conversion_label = "code de conversion";

var google_conversion_value = {$order.totals};

var google_conversion_currency = "EUR";

var google_remarketing_only = false;

/* ]]> */

</script>

</script>

</div>

</noscript>

{/literal}

Une fois le code de tracking sauvegardé, veillez à vider votre cache, et réalisez un test de commande, de manière à vérifier dans le code source de la page de confirmation de commande que le code est bien exécuté (il vous suffira de rechercher votre code de conversion).