Skip to content

Instantly share code, notes, and snippets.

@mbaersch
Created July 22, 2017 23:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbaersch/67b99e04494b5b64530889e56825f380 to your computer and use it in GitHub Desktop.
Save mbaersch/67b99e04494b5b64530889e56825f380 to your computer and use it in GitHub Desktop.
Google Analytics Checkout- und Transaktionsmessung im Collmex-Shop [Google Tag Manager & Universal Analytics Version]
<html>
<!--
Google Analytics Checkout- und Transaktionsmessung im Collmex-Shop - Universal Analytics Version
Version 1.0.0.1 vom 23.07.2017
M. Baersch, gandke marketing & software gmbh - www.gandke.de
-->
<head>
<title>gms Collmex Checkout Tracker</title>
<meta name="robots" content="noindex,nofollow" />
<script type="text/javascript">
var gaTrackingId = "UA-123456789-1";
function getGParam(pname) {
pname = pname.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]") ;
var rx = new RegExp("[\\?&]"+pname+"=([^&#]*)") ;
var results = rx.exec(window.location.href) ;
if(results == null) {
return "";
} else
return results[1] ;
}
</script>
</head>
<body>
<script>
var stepName = getGParam("step") ;
if (stepName) var pg = '/Checkout/' + stepName; else pg="";
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', gaTrackingId, 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview', pg);
ga('require', 'ecommerce');
var orderId = getGParam("id") ;
var orderAmount = getGParam("am") ;
var orderItems = getGParam("items") ;
if (orderAmount > 0) {
ga('ecommerce:addTransaction', {
'id': orderId, // Transaction ID. Required.
'affiliation': '', // Affiliation or store name.
'revenue': orderAmount, // Grand Total.
'shipping': '', // Shipping.
'tax': '' // Tax.
});
var obj = [{'sku':'ShopItems',
'nam':'ShopItems',
'prc':orderAmount,
'qty':1
}];
if (orderItems)
try {
var itemObj = JSON.parse(decodeURI(orderItems));
obj = [];
obj.push.apply(obj, itemObj);
} catch(e) { }
for (var i=0; i < obj.length; i++){
var it = obj[i] ;
ga('ecommerce:addItem', {
'id': orderId, // Transaction ID. Required.
'name': it.nam, // Product name. Required.
'sku': it.sku, // SKU/code.
'category': '', // Category or variation.
'price': it.prc, // Unit price.
'quantity': it.qty // Quantity.
});
}
ga('ecommerce:send');
}
</script>
</body>
</html>
<html>
<!--
Google Analytics Checkout- und Transaktionsmessung im Collmex-Shop - GTM Version
Version 1.0.0.1 vom 23.07.2017
M. Baersch, gandke marketing & software gmbh - www.gandke.de
-->
<head>
<title>gms Collmex Checkout Tracker</title>
<meta name="robots" content="noindex,nofollow" />
<script>
var gtmId = 'GTM-1234567';
(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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer',gtmId);</script>
<script type="text/javascript">
function getGParam(pname) {
pname = pname.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]") ;
var rx = new RegExp("[\\?&]"+pname+"=([^&#]*)") ;
var results = rx.exec(window.location.href) ;
if(results == null) {
return "";
} else
return results[1] ;
}
</script>
</head>
<body>
<script>
var orderId = getGParam("id") ;
var orderAmount = getGParam("am") ;
var orderItems = getGParam("items") ;
var stepName = getGParam("step") ;
if (stepName) {
window.dataLayer = window.dataLayer || [];
if (orderAmount > 0) {
var transProducts = [];
var obj = [{'sku': 'ShopItems',
'nam': 'ShopItems',
'prc': orderAmount,
'qty': 1
}];
if (orderItems)
try {
var itemObj = JSON.parse(decodeURI(orderItems));
obj = [];
obj.push.apply(obj, itemObj);
} catch(e) { }
for (var i=0; i < obj.length; i++){
var it = obj[i] ;
var itm = {'sku': it.sku,
'name': it.nam,
'category': '',
'price': it.prc,
'quantity': it.qty
};
transProducts.push(itm);
}
dataLayer.push({
'event': 'orderSuccess',
'vPageURL': '/Checkout/' + stepName,
'vPageTitle': 'Checkout - '+stepName,
'transactionId': orderId,
'transactionAffiliation': '',
'transactionTotal': orderAmount,
'transactionTax': 0.00,
'transactionShipping': 0.00,
'transactionProducts': transProducts
});
} else
dataLayer.push({
'vPageURL': '/Checkout/' + stepName,
'vPageTitle': 'Checkout - ' + stepName,
'event': 'updVirtualPageview'
});
}
</script>
</body>
</html>
@mbaersch
Copy link
Author

mbaersch commented Jul 22, 2017

Google Analytics Checkout- und Transaktionsmessung im Collmex-Shop

Google Tag Manager & Universal Analytics Version einer Trackingseite zur Messung von Schritten im Checkout und der erfolgten Transaktion über den eigenen Server.

Zweck
Je nach Einsatz des direkt implementierten Trackings für Google Analytics oder des Google Tag Managers kann die eine oder andere Fassung der Datei auf den eigenen Collmex-Shopserver hochgeladen und über das Template via iFrames eingebunden werden, um die Hits an die Webanalyse vom eigenen Server zu senden.

Hinweise zur Verwendung
Unter www.gandke.de/blog/vollstaendige-messung-des-checkout-im-collmex-shop findet sich ein ausführlicher Beitrag über den Einsatz zum Tracking im Collmex-Shop und dem Einbinden in die Templates.

Installation
Nach dem Herunterladen der Datei in Zeile 11 entweder die ID des GTM-Containers (GTM-Version) oder der GA-Property (Universal-Version) eintragen und als gms.tracktrans.html in das Root-Verzeichnis oder einen beliebigen anderen Ordner auf dem Collmex-Shopserver ablegen.

In den jeweiligen Schritten des Shoptemplates (shopframe_template.txt) an den passenden Stellen einen Trackingaufruf implementieren. Die Definition aus dem o. a. Beitrag zur Befüllung der Warenkorbinhalte und die Übertragung der Transaktion auf der Bestätigungsseite übernehmen und das angepasste Template hochladen. Nach dem Hochladen des Shops - und bei Ergänzung der erforderlichen Tags, Trigger und Variablen beim Einsatz des GTM - werden die Schritte des Checkouts und die Transaktionen ohne Umweg über den Collmex-Server an die Webanalyse gesendet.

Parameter
Folgende Parameter verwenden beide Fassungen des Scripts auf gleiche Weise:

  • Als zwingender Parameter wird "step" für die Bezeichnung des Warenkorbschritts benötigt
  • Die Parameter "am" (Amount"; Transaktionssumme) und "id" (Transaktionsnummer) werden verwendet, wenn eine Transaktion übertragen werden soll.
  • Optional können die einzelnen Produkte als "items" in Form eines JSON-Objekts übergeben werden (siehe Hinweise zum Anpassen der Templates im Blog). Fehlt dieser Parameter oder kann dessen Inhalt (z. B, bei extremer Überlänge oder ungültigen Zeichen in den Produktbezeichnungen denkbar) nicht in eine Produktliste umgesetzt werden, wird als "Sammeleintrag" ein Produkt mit SKU und Name "ShopItems" übergeben (Menge: 1; Betrag: Transaktionssumme).

Einsatz mit dem Tag Manager
Wie beim Einsatz des Tag Managers zu verfahren ist, findet sich im Detail im o. a. Blogbeitrag. Prinzipiell werden hier für Schritte im Checkout über ein benutzerdefiniertes Event "updVirtualPageview" und Datenschichtvariablen für Titel und URL der Seite messbar gemacht. Ein weiteres Event "orderSuccess" wird in den dataLayer geschrieben, wenn dort alle Angaben für das Übertragen einer Transaktion abgelegt werden.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment