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 !
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).
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.
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.
C’est simple comme bonjour! Allez-y. Profitez de ce merveilleux outil!
Latest posts by Pier-Yves C Valade
- Google Search Console : le géant met à jour son outil - 1 Juin 2015
- Tuto GTM v2: Reprenez le contrôle de vos campagnes PPC - 7 Mai 2015
- Retour sur 2014: Le Zoo de Google - 24 Décembre 2014
- Pensons Québec 2014: Retour sur la journée Google - 11 Novembre 2014
- Google Tag Manager : Tracker ses transactions - 20 Juin 2014
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!
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!
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.