jQueryを使用して、クリックするたびにGoogleAnalyticsのイベント追跡をリッスンして渡します

より多くの統合とシステムが自動的に含まれないことに驚いています GoogleAnalyticsのイベント追跡 彼らのプラットフォームで。 クライアントのサイトでの私の時間の多くは、イベントの追跡を開発して、サイトで機能しているユーザーの行動または機能していないユーザーの行動に関する必要な情報をクライアントに提供することです。

最近、私は追跡する方法について書きました mailtoクリック, telクリック, Elementorフォームの送信。 私が書いているソリューションを引き続き共有し、サイトまたはWebアプリケーションのパフォーマンスをより適切に分析するのに役立つことを期待しています。

この例では、Google Analyticsイベントカテゴリ、Google Analyticsイベントアクション、およびGoogle Analyticsイベントラベルを含むデータ要素を追加することにより、GoogleAnalyticsイベントトラッキングをアンカータグに組み込む非常に簡単な方法を提供します。 これは、データ要素を組み込んだリンクの例です。 gaevent:

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

サイトの前提条件は、jQueryをサイトに含めることです…このスクリプトを利用しています。 ページが読み込まれると、このスクリプトは、要素をクリックする人のためにページにリスナーを追加します。 gaevent データ…次に、フィールド内で指定したカテゴリ、アクション、およびラベルをキャプチャして解析します。

<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>

注意：実際に合格したものをテストできるように、アラート（コメントアウト）を含めました。

WordPressでjQueryを実行している場合、WordPressは$ショートカットを認識しないため、コードを少し変更する必要があります。

<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>

これは最も堅牢なスクリプトではなく、追加のクリーンアップを行う必要があるかもしれませんが、開始する必要があります。