Google Tag Manager, Ereignis Push to Datenschicht

Question

Ich schreibe diesen Code, um ein Ereignis in die Datenschicht über den Google Tag Manager zu schieben, wenn ein Benutzer mindestens 1 Sekunde lang auf einen bestimmten Bereich der Website klickt. Das Problem ist, dass ich 8 andere Bereiche habe, die dieses Stück Code benutzen und andere Informationen auf die Datenebene schieben (natürlich habe ich verschiedene IDs für diese divs definiert), aber hier kommt der schwierige Teil: Jeder einzelne Bereich schiebt dasselbe Ereignis an mouseover (das Ereignis, das zum letzten Mal als Tag im Google Tag Manager erstellt wurde). Wie könnte ich diese Ereignisse korrekt auf die Datenebene übertragen?

Danke, Attila

Es gibt zwei Beispiele meiner Codes:

var startTime; var endTime; var differenceTime; 

    document.getElementById("budapest-pin").onmouseover = function() {mouseOver()}; 
    document.getElementById("budapest-pin").onmouseout = function() {mouseOut()}; 

    function mouseOver() { 
    startTime = Date.now(); 
    }; 

    function mouseOut() { 
     endTime = Date.now(); 
     differenceTime = (endTime-startTime)/1000; 

     if(differenceTime>1) 
     { 
      dataLayer.push({'event': 'budapest'   
     }); 
     }; 
    }; 
</script> 

<script> 

    var startTime; var endTime; var differenceTime; 

    document.getElementById("szeged-pin").onmouseover = function() {mouseOver()}; 
    document.getElementById("szeged-pin").onmouseout = function() {mouseOut()}; 

    function mouseOver() { 
    startTime = Date.now(); 
    }; 

    function mouseOut() { 
     endTime = Date.now(); 
     differenceTime = (endTime-startTime)/1000; 

     if(differenceTime>1) { 
      dataLayer.push({'event': 'szeged' 

     }); 
     }; 
    }; 
</script> 

Answer 1

Verwenden Setup folgenden Code Ereignisse auf Ihrer Seite zu hören:

var startTime = {}; 
var endTime = {}; 
document.getElementById("budapest-pin").onmouseover = function() { 
    mouseOver('budapest') 
}; 
document.getElementById("budapest-pin").onmouseout = function() { 
    mouseOut('budapest') 
}; 
document.getElementById("szeged-pin").onmouseover = function() { 
    mouseOver('szeged') 
}; 
document.getElementById("szeged-pin").onmouseout = function() { 
    mouseOut('szeged') 
}; 

function mouseOver(id) { 
    startTime[id] = Date.now(); 
}; 

function mouseOut(id) { 
    endTime[id] = Date.now(); 
    var differenceTime = (endTime[id] - startTime[id])/1000; 
    if (differenceTime > 1) { 
     dataLayer.push({ 
      'event': 'mytaghover', 
      'eventCategory': id, 
      'eventAction': 'hover', 
      'eventLabel': 'hovered ' + differenceTime + ' seconds' 
     }); 
    }; 
}; 

Do folgende Schritte in GTM:

1. erstellen 3 GTM Variablen mit dem Typ 'Data Layer Variable' und followint 'Titel' - 'Data Layer Variablenname':

   • dataLayer Category - eventCategory
   • dataLayer Action - eventAction
   • dataLayer Label - eventLabel

2. GTM Trigger erstellen mit dem Titel MyHover trigger, Typ 'Custom Event' und 'Name des Ereignisses' mytaghover

3. GTM-Tag mit Typ 'Google Analytics' erstellen. Definieren Sie Ihre Tracking-ID. Wählen Sie "Ereignis" im Feld "Spurtyp". Füllen Sie die Felder der 'Ereignisverfolgungs-Parameter' mit den entsprechenden Variablen aus Schritt 1 aus. Wählen Sie im Abschnitt 'Feuer ein' die Option 'Mehr' und wählen Sie MyHover trigger.

4. Testen Sie Ihren Container im 'Vorschau' Modus und veröffentlichen Sie ihn.