Google Tag Manager : Tracker ses transactions

Google Tag Manager : Tracker ses transactions

by Pier-Yves C Valade / Vendredi, 20 Juin 2014 / Published in Mesure & optimisation

J’ai eu la brillante idée un jour de préparer un script de gestion pour un de mes clients. Je gère son dossier avec  Google Tag Manager. C’est vraiment une bonne idée, surtout pour les balises communes de Google Analytics ou de remarketing, par exemple.

L’idée est bonne, mais un brin compliquée. Il n’est pas aussi simple de faire le suivi de la conversion avec GTM. J’étais persuadé que ce serait simple, mais en réalité, c’était tout simplement incompatible. Le code pour faire le suivi des transactions électroniques de Google Analytics ne semble pas parler le même langage magique que le Google Tag Manager, à mon grand désarroi. J’ai donc plongé, tête première, dans les renseignements bien évidemment simples et complets de Google sur le suivi des transactions électroniques à l’aide du gestionnaire de balises de Google. Lorsque je suis parvenu à réaliser l’impossible, au dire de mes confrères, j’ai cru bon de préparer le présent Guide pour faire le suivi des transactions E-commerce avec Google Tag Manager, juste au cas où quelqu’un voudrait en arriver au même point que moi.

Vous ne connaissez peut-être pas Google Tag Manager, mais c’est un outil très simple. Il s’agit d’un gestionnaire de snippets (bout de codes) qui vous permettent de déterminer où et quand vous déclenchez l’affichage d’éléments sur les pages. Intriguant, n’est-ce pas? Lisez la suite.

AVIS DE NON-RESPONSABILITÉ : Même si les étapes qui suivent donnent de bons résultats pour mes clients, la démarche qui suit doit être perçue comme une validation de principe et elle pourrait vraiment endommager l’installation de Magento. Par conséquent, l’auteur, Pier-Yves C. Valade, et Ludis Media se dégagent de toute responsabilité et de tout ce qui pourrait arriver aux sites Web si vous suivez la démarche décrite dans le présent article. Il est fortement recommandé de faire appel à un spécialiste de Magento.

Créer un compte dans Google Tag Manager

Si vous n’avez pas déjà un compte dans Google Tag Manager, vous devrez en créer un. Je vous recommande de lire la démarche de Big Daylight pour le faire correctement.

Assurez-vous d’inscrire le bout de code de Google Tag Manager tout de suite après la balise <body> pour que tout fonctionne comme prévu. Voici ce que vous pourrez voir sur votre page :

<html>
    <head>
        [...]
    </head>
    <body>
        <!-- Google Tag Manager -->
        <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXX"
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXXX');</script>
        <!-- End Google Tag Manager -->

        [...]

Créer la balise de conversion de Google Analytics

Dès que vous aurez créé la première balise de Google Analytics dans Google Tag Manager, vous devrez en créer une deuxième conçue précisément cette fois pour faire le suivi des transactions. Elle sera en mesure de voir les données qui lui seront transmises. Assurez-vous de choisir le suivi des transaction, non pas celui du Page View !

 

google-tag-manager-track-type

Dès que la balise est prête, vous devez créer un élément déclencheur et le lier à la page de remerciement.

Déclencher la balise de conversion de Google Analytics

Il est assez facile de déclencher la balise que vous venez de créer. Vous n’avez qu’à cliquer à droite sur le bouton qui permet d’ajouter une règle de déclenchement (voir ci-dessous).

google-tag-manager-firing-rules

Lorsque le popup s’affiche, vous devez écrire la règle. Donnez-lui un nom comme « Checkout Thank You Page ». Assurez-vous que la règle ne concerne que l’adresse url qui affiche le chemin exact vers la page de remerciement, par exemple « checkout/success ». Faites aussi le suivi d’une action « gtm.dom » en particulier. Elle se déclenchera dès que la page sera complètement téléchargée. Ainsi, vous retiendrez toute l’information qui s’affichera après le script du Google Tag Manager.

google-tag-manager-edit-rule

Ensuite, sauvegardez la règle et la balise et publiez le tout.

Utiliser la magie de DataLayer sur la page de remerciements

Tout devrait être correctement programmé dans le Google Tag Manager. Vous pouvez maintenant faire un test avec des données de transaction et les transmettre à la nouvelle balise.

Vous connaissez peut-être déjà l’élément _gaq et la méthode _trackTrans. C’est la vieille façon de faire que vous utilisez dans  Google Tag Manager. Les deux méthodes se ressemblent beaucoup, mais celle-ci est une organisation en couches et elle s’active grâce au code _dataLayer, au lieu du code _gaq. Vous pouvez aussi utiliser la méthode du datalayer.push. Mais ça, c’est un tout autre sujet en soi.

Il y a bien des façons d’écrire et d’utiliser le code dataLayer. Voici le mien; il comporte les différentes variables dont j’avais besoin. Je vous montre aussi comment j’ai réussi à m’y rendre en passant par Magento.

Voici le code PHP de Magento en arrière-plan

File: /app/code/local/Mage/GoogleAnalytics/Block/Ga.php
<?php
    protected function _getOrdersTrackingCode(){
        $orderIds = $this->getOrderIds();
        if (empty($orderIds) || !is_array($orderIds)) {
            return;
        }
        $collection = Mage::getResourceModel('sales/order_collection')
            ->addFieldToFilter('entity_id', array('in' => $orderIds))
        ;

        $aOrders = array();
        foreach ($collection as $order) {
            $objOrder = new stdClass();
            $objOrder->transactionId = $order->getIncrementId();
            $objOrder->transactionAffiliation = Mage::app()->getStore()->getFrontendName();
            $objOrder->transactionTotal = $order->getBaseGrandTotal();
            $objOrder->transactionTax = $order->getBaseTaxAmount();
            $objOrder->transactionShipping = $order->getBaseShippingAmount();

            $aItems = array();
            foreach ($order->getAllVisibleItems() as $item) {
                $objItem = array();
                $objItem['sku'] = $item->getSku();
                $objItem['name'] = $item->getName();
                $objItem['category'] = null; //todo
                $objItem['price'] = $item->getBasePrice();
                $objItem['quantity'] = $item->getQtyOrdered();
                $aItems[] = (object) $objItem;
            }

            $objOrder->transactionProducts = $aItems;
            $aOrders[] = $objOrder;
        }

        return (empty($aOrders))? null : sprintf('dataLayer = %s;', json_encode($aOrders));
    }
?>

Voici le code du dataLayer sur la page HTML

<script>
    dataLayer = [{
        'transactionId': '1234',
        'transactionAffiliation': 'Acme Clothing',
        'transactionTotal': 11.99,
        'transactionTax': 1.29,
        'transactionShipping': 5,
        'transactionProducts': [{
            'sku': 'DD44',
            'name': 'T-Shirt',
            'category': 'Apparel',
            'price': 11.99,
            'quantity': 1
        },{
            'sku': 'AA1243544',
            'name': 'Socks',
            'category': 'Apparel',
            'price': 9.99,
            'quantity': 2
        }]
    }];
</script>

Accorder du temps aux tests

Dès que vous serez parvenu à tout mettre en place, vous devrez faire des tests! Vous voudrez absolument continuer de faire le suivi des données sur le commerce électronique dans votre compte de Google Analytics. Alors, allez-y. Faites un achat bidon ou attendez que des achats soient faits. Vous pourrez vérifier s’ils ont activé le processus complet. Si tout fonctionne comme prévu, vous devriez avoir des données au cours des 24 prochaines heures.

google-analytics

C’est simple comme bonjour! Allez-y. Profitez de ce merveilleux outil!

The following two tabs change content below.
Pier-Yves C Valade, Ludis Media
I'm currently an SEO, PPC and Analytics specialist here at Ludis Media! Always looking for new challenges, I am a leader who’s not afraid of anything! I am in constant improvement in all facets of my life and aims at every moment to excel. I am an excellent communicator and also have an open mind. On a more personal side, I am fond of scotch, cars, bikes and great food! I love Hans!

6 Responses to “Google Tag Manager : Tracker ses transactions”

  1. Mike Mike says : Reply

    Bonjour Pier-Yves
    Merci pour ce tuto, je me suis arrêté à la configuration Tag Manager (“Ensuite, sauvegardez la règle et la balise et publiez le tout.”). J’ai une boutique Magento et j’ai bien les transactions qui remontent dans Analytics mais aucune information sur le chiffre d’affaire qui reste à zéro ?
    Dois-je forcément passé par un data layer ? Ce qui est bizarre c’est qu’avant Tag Manager, mon CA remontait bien dans Analytics

    • Bonjour Mike,

      Afin de tracker les ventes adéquatement, vous vous devez de passer les données de transaction via dataLayer. Les éléments du tracking Google Analytics standard ne parlent pas au GTM.

      J’espère que ça répond bien à votre question!

  2. Mike Mike says : Reply

    Bonjour Pier-Yves
    Merci de votre réponse. Si je comprends bien, si on a pas de développeur sous la main, il vaut mieux rester sous Analytics et ne pas tenter l’aventure GTM 🙂
    Je vais regarder au niveau des extensions/plugin qui pourraient générer le datalayer automatiquement

    Merci encore

    • Effectivement, l’intégration tel que proposé nécessite un peu de temps développeur. Par contre, il y a effectivement des plugins Magento qui peuvent le faire pour vous!

  3. Frane Frane says : Reply

    Bonsoir
    A chaque fois que je fais une recherche sur GTM, je tombe sur votre site. Peut-être vous allez pouvoir me renseigner :
    J’ai installé GTM et créé le tag de base pageviews. J’ai fait créé un datalayer + tag e-commerce. Ce tag a un Track Type Pageview et se déclenche avec event equals gtm.dom => A présent les transactions remontent bien dans Analytics MAIS le taux de rebond a chuté (de 25% à 1%).
    J’ai essayé de passer le track type à “Transaction” mais les ventes ne remontaient plus.
    Auriez-vous un conseil, une recommandation ?
    Cdt

    • Bonjour Frane,

      Le tout tel qu’expliqué semble correctement mis en place. Pour ce qui est du taux de rebond, il est possible que vous ayez des événements qui font en sorte que plus personne ne “rebondit” ou encore que vous ayez plusieurs balises Google Analytics qui s’affichent sur une page.

Des commentaires?

 
 
TOP