向 GA 發送事件的正確方法是什么？

Question

我們正在使用光滑的輪播，並且箭頭已啟用。 單擊箭頭時，我們希望使用以下內容向 GA 發送事件。 但是，當我們單擊箭頭元素時，它不會發送。 沒有錯誤消息，我的GA Debugger for Chrome之類的擴展似乎都沒有返回任何結果。

這是我們嘗試過但沒有奏效的方法。 在我們的本地測試環境中，我們可以添加 google-analytics.js 文件，但這里無法加載。

我們使用這篇文章通過 GTM 安裝了 GA

 $(document).ready(function () { var carsl = $('.carousel'); carsl.slick(); carsl.on('click', '.slick-arrow', function() { // Create GA event; // this does not work. ga('send', { hitType: 'event', eventCategory: 'Slick', eventAction: 'arrow', eventLabel: 'clicked' }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="carousel"> <div class="carousel__item">item 1</div> <div class="carousel__item">item 2</div> <div class="carousel__item">item 3</div> <div class="carousel__item">item 4</div> </div>

這也在<head>

 <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>

Answer 1

這里的問題是您沒有使用正確的方法將事件發送到 GA。

您已經通過 GTM 實現了 GA，但是您在單擊箭頭時使用的 function 是用於如果您通過 analytics.js 實現了 GA。

使用 GTM 跟蹤事件的方法有很多，但是由於您已經在 javascript 頁面上找到了，因此根據您目前所擁有的內容來解決它是最簡單的。

該解決方案將利用 gtm 中的數據層事件。

將代碼的 GA 部分更改為：

$(document).ready(function () {

  var carsl = $('.carousel');
  carsl.slick();

  carsl.on('click', '.slick-arrow', function() {

    // push event to datalayer, the event name is whatever you like
    // this does should work
     dataLayer.push({'event': 'mySlickArrowEvent'});

  });

});

GTM 設置：

在 GTM 中，設置觸發器。 Go 到 GTM，go 到“觸發器”屏幕，添加“自定義事件”類型的新觸發器，並在“事件名稱”字段中，從上方輸入該名稱“mySlickArrowEvent”。 像這樣：

現在 go 到“標簽”屏幕並添加一個新的 Google Analytics 標簽。 這次選擇“事件”類型，填寫所有事件類別、動作和 label，因為您希望它出現在 GA 中，並將我們剛剛創建的觸發器附加到這個新標簽。 像這樣：

現在，要么使用調試模式預覽所有內容，要么只發布容器，事件應該在 GA 中注冊。