Return 提交表单前计算点击次数

Question

在票务页面上，我试图跟踪添加到购物车的 tickets 的点击次数，以便我可以将值传递给 Google 跟踪代码管理器数据层。我编写了以下函数：

// Increment/subtract count on user click
function updatef1a2cCounter(count) {
    var count = 0;
    $('.ticketf12c .add-amount').click(function () {
        count++;
    });
    $('ticketf12c .subtract-amount').click(function () {
        count--;
    });

    return count;
}

// Get and return current count. Push to dataLayer
$('.test-submit-button').click(function (e) {
    e.preventDefault();
    console.log(updatef1a2cCounter());

    dataLayer.push({
        'event': 'productDetail',
        'ecommerce': {
            'detail': {
                // Family tickets   
                'products': [{
                    'name': 'Ticket Type Name Goes here',
                    'id': '',
                    'price': '100.00',
                    'brand': 'Some Brand',
                    'category': 'Ticket',
                    'quantity': updatef1a2cCounter()
                }]                    
            }
        }
    });

});

当有人添加和减去项目时，我的点击事件计数器工作正常，但是当我点击提交按钮时，计数总是 returns 0。知道我在这里可能做错了什么吗？

Answer 1

删除函数 updatef1a2cCounter。将下面的代码移到外部 updatef1a2cCounter。并直接使用 count 而不是 updatef1a2cCounter().

var count = 0;
$('.ticketf12c .add-amount').click(function () {
    count++;
});
$('.ticketf12c .subtract-amount').click(function () {
    count--;
});

下面是完整的代码。

// Increment/subtract count on user click
var count = 0;
$('.ticketf12c .add-amount').click(function() {
  count++;
});
$('.ticketf12c .subtract-amount').click(function() {
  count--;
});

// Get and return current count. Push to dataLayer
$('.test-submit-button').click(function(e) {
  e.preventDefault();
  console.log(count);

  dataLayer.push({
    'event': 'productDetail',
    'ecommerce': {
      'detail': {
        // Family tickets   
        'products': [{
          'name': 'Ticket Type Name Goes here',
          'id': '',
          'price': '100.00',
          'brand': 'Some Brand',
          'category': 'Ticket',
          'quantity': count
        }]
      }
    }
  });

});

I have the click event counters working correctly when someone adds and subtracts and item.

我确信您的点击事件不会起作用，除非您从其他地方调用 updatef1a2cCounter()。单击 submit button 后它将开始工作。另外，正如您在 updatef1a2cCounter() 的初始行使用 var count = 0 然后 return count; 所以它总是 return 0.

Answer 2

您每次
都在向 $('.ticketf12c .add-amount') 添加事件处理程序单击 $('.test-submit-button') - 您将返回开始时设置的 0

此外，您在此处的 .ticketf12c 选择器中遗漏了一个点：

$('.ticketf12c .subtract-amount').click(function() {

您可能打算使用

'quantity': count

并像这样在页面加载时添加事件处理程序：

let count = 0;

$(function() { // on page load

  $('.ticketf12c .add-amount').click(function() {
    count++;
  });
  $('.ticketf12c .subtract-amount').click(function() {
    count--; // you may want to test for negative here?
  });
  // Get and return current count. Push to dataLayer
  $('.test-submit-button').click(function(e) {
    e.preventDefault();
    console.log(count);

    dataLayer.push({
      'event': 'productDetail',
      'ecommerce': {
        'detail': {
          // Family tickets   
          'products': [{
            'name': 'Ticket Type Name Goes here',
            'id': '',
            'price': '100.00',
            'brand': 'Some Brand',
            'category': 'Ticket',
            'quantity': count // no function needed
          }]
        }
      }
    });

  });
});

Return 提交表单前计算点击次数

Return count on click before submitting form

javascript

jquery

google-datalayer