Click Tracking für Iframes - Share-Buttons, Banner und Affiliate Widgets

Alles, was innerhalb dieser Iframes passiert, bleibt der eigentlichen Seite verborgen. Deshalb kann man bei einem geframeten Newsletter Anmeldeformular nicht das Abschicken des Formulars erkennen. Oder welche Felder fokusiert und/oder ausgefüllt werden. Bei einem Affiliate Widget oder Facebook Share Button würde aber ein Click-Event auf das Iframe – nicht dessen Inhalte – reichen. Nur leider hat das Iframe-Element kein onclick-Attribut. Aber es gibt einen Ausweg: wir machen uns zu Nutze, dass bei einem Click auf ein Iframe die geframete Datei den Fokus bekommt oder genauer: dass die framende Datei diesen verliert. Dann können wir das onBlur-Event nutzen. Die Idee ist daher folgende: Wenn die framende Datei den Fokus verliert, überprüfen wir für alle Iframes, ob sich der Mauscursor (oder der Finger, bei Touch-Displays) über dem Iframe befindet. Falls ja, melden wir dem GTM ein Click-Event für dieses Element. Umgesetzt wird das im GTM mit einem Tag vom Typ custom/benutzerdefiniertes HTML mit ein wenig JavaScript Code. Zuerst definieren wir eine Variable, die auf ein Iframe-Element zeigt, wenn sich der Cursor über diesem befindet. var iframe_element = null; Mit einer For-Schleife hängen wir nun an jedes Iframe zwei Eventlistener. Befindet sich die Maus über dem Iframe referenzieren wir die Variable iframe_element auf dieses Iframe. Verlässt der Mauscursor das Iframe wieder, soll die Variable ins Leere zeigen. Selbiges machen wir für Touch-Clicks:

var iframes = document.getElementsByTagName("iframe");

for (var i = 0; i < iframes.length; i++) {
  iframes[i].addEventListener('mouseover', function() {
    iframe_element = this;
  });
   
  iframes[i].addEventListener('touchstart', function() {     
    iframe_element = this;
  });   
  
  iframes[i].addEventListener('mouseout', function() {     
    iframe_element = null;
  });   
   
  iframes[i].addEventListener('touchend', function() {     
    iframe_element = null;
  });         
}

Und zuletzt schreiben wir noch den Eventlistener für die framende Datei. Wenn diese den Fokus verliert und sich der Cursor über einem Iframe befindet, also die Variable iframe_element nicht null ist, wird ein Event “iframe click” und das angeklickte Iframe über den DataLayer an den GTM geschickt.

window.addEventListener('blur', function() {
  if(iframe_element) {
    dataLayer.push({ event : "iframe_click", "iframe_element" : iframe_element });
  }
});

Nun können wir dieses Event nutzen um darauf zu reagieren. Über das verlinkte Iframe-Element können wir noch überprüfen, ob es sich um das richtige Element, z.B. ein Iframe mit einem Amazon Affiliate Widget handelt. Sowohl Klassen, IDs als auch die verlinkte Datei (src-Attribut) können dafür genutzt werden. Wir legen daher im GTM eine DataLayer-Variable an, in die wir die Referenz auf das angeklickte Iframe speichern.

In einer zweiten Variable vom Typ custom/benutzerdefiniertes JavaScript holen wir uns das src-Attribut dieses Elements:

Und damit können wir nun unseren Trigger definieren:

Et voilá, mit diesem Trigger können wir nun unsere Tracking- oder Conversiontags auslösen, oder eine Popup-Nachricht wie im folgenden Beispiel. Experimentieren Sie doch ein wenig auf den beiden folgenden Demo-Bereichen, welches Verhalten einen Click auslöst und welches nicht. Ob das Iframe Tracking greift, erkennen Sie am Alert-Popup, das bei einem erfassten Click erscheint.

Variante 1: ohne window.focus()

Integer bibendum ligula et ex consectetur laoreet. Quisque faucibus mi ex, aliquam sollicitudin metus vulputate eu. Curabitur dapibus tincidunt ullamcorper. Nullam vel tortor leo. Duis nisl mi, ultricies eu placerat ac, blandit id dolor. Aliquam pharetra, tellus in faucibus mattis, quam turpis feugiat odio, id auctor risus sapien tincidunt eros. Vivamus semper fermentum purus, eu consequat libero. Aliquam tristique viverra odio eu finibus. Ut bibendum arcu in metus vulputate, in efficitur elit faucibus. Ut blandit lacus quis arcu vestibulum consectetur. Vestibulum porta ut velit a bibendum. Praesent scelerisque dictum urna, ut posuere lorem molestie vel. Morbi sit amet velit justo. Donec eleifend, sem non imperdiet lobortis, ipsum enim porttitor sem, vitae accumsan massa nisi quis quam.

Variante 2: mit window.focus()

Einschränkungen:

Mit diesem Workaround lassen sich wirklich nur Clicks auf das Iframe erfassen. Was innerhalb des Frames passiert, bleibt weiter im Dunklen. Im Falle des Amazon Affiliate Widgets heißt dies aber auch: der Click wird gemeldet, egal ob innerhalb des Widgets ein Link oder auf eine der wenigen unverlinkten Flächen geklickt wurde. Ein zweites Problem: Sobald die framende Datei den Fokus verloren hat, werden weitere Iframe-Clicks nicht mehr erfasst. Zum Beispiel, wenn Sie zuerst den facebook-Share-Button und direkt danach den Twitter-Button klicken. Damit Sie beide Events erfassen können, muss zwischen den beiden Links die framende Datei wieder den Fokus bekommen. Das kann geschehen, wenn zwischen den beiden Button-Clicks in die framende Datei geklickt wird. Als Entwickler kann man da auch nachhelfen, indem man beim mouseout-Event mit window.focus() der framenden Datei den Fokus zurück gibt. Das sollten Sie aber keinesfalls machen, wenn der Besucher mit den geframeten Inhalten interagieren soll, zum Beispiel ein Anmeldeformular ausfüllt. So würde der Textcursor während des Ausfüllens aus einem Eingabefeld herausspringen, wenn der Mauscursor das Iframe verlässt. Das kann schnell frustrierend werden. Mehrfachclicks auf den selben Button würde man aber auch damit nicht tracken können. Auf gar keinen Fall sollte window.focus() vom touchend Event ausgelöst werden. Das würde das Ausfüllen eines geframten Formulars nicht nur mühsam sondern sogar unmöglich machen. Ein weiteres Problem: das Blur Event im framenden Fenster wird nicht nur von der linken Maustaste ausgelöst, sondern auch von der rechten. Dem Blur Event können wir auch nicht entnehmen, ob die linke oder die rechte Maustaste geklickt wurde und das Click Event steht uns nicht zur Verfügung, wenn der Click auf einem Iframe erfolgt.

Fazit:

Perfekt ist die Lösung nicht. Gerade wenn mehrere Iframe Elemente auf der Seite erfasst werden. Oder wenn das Spannende nicht der Click an sich ist, sondern man gerne genauer wüsste, was in dem Iframe passiert. Zum Beispiel das Abschicken eines Formulars. Dennoch erlaubt diese Lösung das Tracken von Clicks auf Werbebanner, Share-Buttons oder Affiliate-Widgets. Und das wüsste man doch ganz gerne, ob die Besucher von diesen Funktionen Gebrauch machen.

Click Tracking für Iframes - Share-Buttons, Banner und Affiliate Widgets

Management Summary

Variante 1: ohne window.focus()

Variante 2: mit window.focus()

Einschränkungen:

Fazit:

Weitere Themen