Conversion Tracking mit Squarespace

05. 07. 2016
|
Analytics
|

Vor allem kleinere Unternehmer greifen mittlerweile gerne auf die Websitebaukästen wie Jimdo, Wix oder Squarespace zurück, um sich einfach und günstig eine Website erstellen. Die einfachen Drag- & Drop Elemente machen es möglich, dass auch der Laie mit vorgegebenen Templates sich relativ schnell eine kleine Website zusammenbasteln kann.

Beim technischen SEO und auch beim Tracking stoßen solche System schnell an ihre Grenzen. Zwar kann bei allen in den Einstellungen eine Google Analytics Property hinterlegt werden, will man mehr tracken als normale PageViews hat das ganze aber relativ schnell ein Ende.

Abgesendete Kontaktformulare auf Squarespace als Conversions tracken

Squarespace erlaubt es den Usern in den head und in den footer sowohl sitewide als auch auf einzelnen Seiten Code einzubringen. Falls man ein normales eingebettetes Formular auf squarespace benutzt kann man normales Google Analytics JavaScript nutzen um ein Event zu senden.

Ist ein Kontaktformular erfolgreich abgeschickt läd squarespace einen “Danke” Text. Weil wir aber in den Code des Formulars selbst eingreifen können nutzen wir einen jQuery Code den wir auf der Seite mit dem Kontaktformular in den Head einfügen:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

var eventposted=0;

$(document).ready(function(){
$('input.button').click(function() {
window.setInterval(foo, 100);
});
});

function foo(){
if(($(".form-submission-text").is(':visible')) && (eventposted==0)){
_gaq.push(['_trackEvent', 'Conversion', 'Kontaktformular']);
eventposted=1;
}
}

</script>

Dieser Code macht nichts anderes als zu “horchen”, ob der Danke Text mit der CSS Classe “form-submission-text” sichtbar ist und feuert dann das Event _gaq.push([‘_trackEvent’, ‘Conversion’, ‘Kontaktformular’]); an Google Analytics

Achtung: Squarespace nutzt noch das klassische Analytics. Wer Google Analytics also über die Squarespace Einstellungen einbindet, muss auch hier bei den Events den klassischen _gaq.push Befehl verwenden.

Conversions mit Google Tag Manager tracken

Problem dieser Methode: Bei Formularen die in Lightboxes oder Overlays funktioniert der jQuery Trick oft nicht. Deshalb ist ein anderer Ansatz auf den Google Tag Manager zurückzugreifen. Auch wenn man hier ein wenig tricksen muss.

Der Google Tag Manager Container soll eigentlich direkt hinter dem sich öffnenden <body> Tag eingefügt werden – was bei Squarespace aber leider nicht funktioniert.

<!-- 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>// <![CDATA[
(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-XXXXXX');
// ]]></script>
<!-- End Google Tag Manager -->

Das Einfügen des Google Containers via jQuery – wie hier beschrieben – hat bei mir leider nicht funktioniert. Die Lösung: Wir “reißen” den Container auseinander und setzen das <script> in den Head und das <noscript> in den Footer. Dazu auf Settings –> Advanced –> Code Injection und fügen dort die beiden Container Teile ein. Das ist zwar nicht ganz sauber – aber funktioniert:

Squarespace Tracking

Im zweiten Schritt nutzen wir das Custom HTML Feld, das uns nach dem erfolgreichen Abschicken des Formulars zu Verfügung steht. Hier pushen wir einfach eine Variable in den dataLayer:

<script>dataLayer.push({'event': 'custom.formSubmit'});</script>

Squarespace DataLayer

Dieselbe Variable kann ich bei jedem Formular auf der Website verwenden, solange ich immer nur ein Formular pro Seite habe. Sind verschiedenen Formulare auf der gleichen Seite sollte man natürlich auch verschiedene Variablen benutzen.

Trigger und Tags im Google Tag Manager einrichten

Damit ist auf squarespace alles getan. Im Google Tag Manager Backend richte ich mir zunächst einen Trigger für jedes Formular auf meiner Seite ein. Dazu erstelle ich mir ein Benutzerdefiniertes Ereignis, gebe als Ereignisname mein custom.formSubmit ein und nenne als zusätzliche Bedingung, dass die URL der Seite der meiner Kontaktseite entsprechen muss:

Trigger GTM

Anschließend erstelle ich ein Tag das vom GTM an Google Analytics gefeuert wird, sobald mein erstellter Trigger ausgelöst wurde. Dazu wähle ich Klassisches Google Analyitcs (siehe oben) und konfiguriere mein Tag als Ereignis:

GTM Tag

Fertig! Jetzt im Vorschaumodus testen, ob alles funktioniert und in Google Analytics im Echtzeit Modus Ereignisse registriert werden. Anschließend den Container veröffentlichen, damit er für alle User gültig ist.

In Google Analytics können die Events anschließend unter Verwalten –> Zielvorhaben zu Conversions „erklärt“ werden. Wir erstellen einen benutzerdefiniertes Event mit dem Eventtyp Ereignis. Als Zieldetails übernehmen wir Kategorie, Aktion, Label und Wert des Events.

Anschließend können diese Conversions dann auch in AdWords importiert werden.