AB test en 10 lignes sur PrestaShop

AB test en 10 lignes sur PrestaShop

L'idée ici, c'est de montrer que c'est facile d'implémenter un AB test sur PrestaShop avec un coup minimum. La mise en place demande l'ajout de 10 lignes sur PrestaShop et l'ajout d'un trigger sur GoogleTagsManager.

La démo utilise le module banner du thème classic, et permet de tester 2 images sur la home.

L'exemple en démo est reproductible sur de plus grandes parties de code et sur d'autres éléments. Si vous n'avez pas un énorme budget pour invertir dans une solution d'AB test plus robuste, cette méthode peut être une bonne solution pour améliorer - réellement - le taux de conversion de votre boutique, à moindre coût.

Qu'est-ce que le test A/B ?

Il s'agit de créer deux versions - ou plus - d'une page et de mesurer la pertinence des 2 versions en comparant des indicateurs, comme des CTR, le taux de rebond, etc... ce qui permet d'améliorer - normalement - le taux de conversion pour atteindre les objectifs de vente.

Qu'est-ce qu'on peut AB tester sur PrestaShop

Le design de votre boutique, les interfaces, le contenu, les couleurs, bref... Tout ce qui contribue à l'expérience utilisateur peut être testé. L'idée, c'est de tester principalement les éléments qui permettront des conversions. La solution d'A/B testing vous permettra trouver la combinaison parfaite de tous les aspects de votre PrestaShop.

Les ressources

Faire de l'A/B testing demande plus de travail. Si vous souhaitez tester 2 images, bien, il faut produire 2 images - forcément.

Je vous fournis le module modifié avec les 2 images supplémentaires à la fin de l'article.

Le code

Pour l'alternance des templates, j'utilise la méthode rand() de PHP. Un flag, ou un autre système, était également possible pour avoir une répartition exacte du nombre d'affichages.

Rapide et simple. Oui. Mais si vous souhaitez tester 2 templates différents, il faut 2 fichiers de template. Ici ps_bannerA.tpl et ps_bannerB.tpl.

Je vous propose de modifier la méthode renderWidget() du fichier modulesps_bannerps_banner.php comme ceci: 

  public function renderWidget($hookName, array $params)
    {
        if (!$this->isCached($this->templateFile, $this->getCacheId('ps_banner'))) {
            $this->smarty->assign($this->getWidgetVariables($hookName, $params));
        }

        $rand = rand(0, 1);

        $this->templateFileA = 'module:ps_banner/ps_bannerA.tpl';
        $this->templateFileB = 'module:ps_banner/ps_bannerB.tpl';

        if ($rand) {
            return $this->fetch($this->templateFileA, $this->getCacheId('ps_banner'));
        }
        else {
            return $this->fetch($this->templateFileB, $this->getCacheId('ps_banner'));
        }
    }

Les fichiers de template

Ici, j'ai juste mis le lien de l'image en dur, et ajouté un id pour chacun des templates.

<a class="banner" href="{$banner_link}" id="testA" title="{$banner_desc}">
    <img src="/modules/ps_banner/img/testA.jpg" alt="{$banner_desc}" title="{$banner_desc}" class="img-fluid">
</a>

Les cookies

Si par la suite, vous trouvez que d'assigner des cookies sera plus adapté pour récupérer vos datas, voici comment setter des cookies avec PrestaShop:

  public function renderWidget($hookName, array $params)
    {
        if (!$this->isCached($this->templateFile, $this->getCacheId('ps_banner'))) {
            $this->smarty->assign($this->getWidgetVariables($hookName, $params));
        }

        $Cookie = new Cookie('AB_test_1');
        $rand = rand(0, 1);

        $this->templateFileA = 'module:ps_banner/ps_bannerA.tpl';
        $this->templateFileB = 'module:ps_banner/ps_bannerB.tpl';

        if ($rand) {
            $Cookie->__set('testA', 1 , time() + (int)Configuration::get('AB_TEST_1_TIME') * 24 * 3600);
            return $this->fetch($this->templateFileA, $this->getCacheId('ps_banner'));
        }
        else {
            $Cookie->__set('testB', 1 , time() + (int)Configuration::get('AB_TEST_1_TIME') * 24 * 3600);
            return $this->fetch($this->templateFileB, $this->getCacheId('ps_banner'));
        }
    }

Pensez à mettre un expire date cohérent avec les durées de vos tests. Si vous ABtestez pendant 15 jours, vous pouvez par exemple avoir une durée d'1 mois sans problème.

Les récupérer les datas avec GTM

Si vous avez Googlte Tag Manager d'installé, vous pouvez :

  • Récupérer les ids que vous positionnerez judicieusement dans vos templates,
  • Ou récupérer les cookies

Si vous avez Google Analytics, vous pouvez activer le content experience.

Télécharger les sources