提交表单前的点击返回计数

时间:2020-09-04 05:47:37

标签: javascript jquery google-datalayer

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

// 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()
                }]                    
            }
        }
    });

});

当有人添加和减去项目时,单击事件计数器正常工作,但是当我按下“提交”按钮时,计数始终返回0。有什么想法我可能在这里做错了吗?

2 个答案:

答案 0 :(得分: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
        }]
      }
    }
  });

});

当有人添加和减去项目时,我的点击事件计数器正常工作。

除非您从其他地方致电updatef1a2cCounter(),否则我确信您的点击事件将无法正常工作。单击submit button后,它将开始工作。同样,就像您在var count = 0的起始行然后使用updatef1a2cCounter()的起始行使用return count;一样,它总是返回0

答案 1 :(得分:1)

您每次都向$('.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
          }]
        }
      }
    });

  });
});