Použijte jQuery k poslechu a předávání sledování událostí Google Analytics pro jakékoli kliknutí

jQuery Listen for Clicks to Pass Google Analytics Event Tracking

Překvapuje mě, že více integrací a systémů automaticky nezahrnuje Sledování událostí Google Analytics na jejich platformách. Většinu času, kdy pracuji na webech klientů, vyvíjím sledování událostí, abych klientovi poskytl potřebné informace o tom, jaké chování uživatelů na webu funguje nebo nefunguje.

Nedávno jsem psal o tom, jak sledovat kliknutí mailto, tel kliknutí, a Odeslání formuláře Elementor. Budu i nadále sdílet řešení, která píšu, s nadějí, že vám pomohou lépe analyzovat výkon vašeho webu nebo webové aplikace.

Tento příklad poskytuje velmi jednoduchý způsob začlenění sledování událostí Google Analytics do jakékoli značky ukotvení přidáním datového prvku, který zahrnuje kategorii události Google Analytics, akci události Google Analytics a štítek události Google Analytics. Zde je příklad odkazu, který zahrnuje datový prvek, tzv gaevent:

<a href="#" data-gaevent="Category,Action,Label">Click Here</a>

Předpokladem pro váš web je zahrnutí jQuery do něj…, se kterým je tento skript poháněn. Jakmile se vaše stránka načte, tento skript přidá na vaši stránku posluchače pro každého, kdo klikne na prvek gaevent data… pak zachytí a analyzuje kategorii, akci a štítek, které zadáte v poli.

<script>
  $(document).ready(function() {      
    $(document).on('click', '[data-gaevent]', function(e) {
      var $link = $(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Upozornění: Zahrnul jsem upozornění (komentované), abyste si mohli vyzkoušet, co skutečně prošlo.

Pokud používáte jQuery na WordPressu, budete chtít kód trochu upravit, protože WordPress neocení klávesovou zkratku $:

<script>
  jQuery(document).ready(function() {      
    jQuery(document).on('click', '[data-gaevent]', function(e) {
      var $link = jQuery(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Není to nejrobustnější skript a možná budete muset provést nějaké další vyčištění, ale měl by vám pomoci začít!