Question

我在onclick锚标记事件中将事件推送到GTM这里的问题是在通过jQuery获取数据时我无法使用引号（单引号或双引号），因为它正在破坏代码。我还尝试使用\(slash)转义引号并使用XML "，但仍然无法解决问题。这是我的代码

    <a title="Comprar" class="btn-pdp-bag"
        onclick=" dataLayer.push({
          'event':addToCart,
          'ecommerce':{
              'remove':{
                  'products':[{'name':'Playera Polo',
                              'id':'123456' ,
                              'price':'1340.0',                                                     
                              'category':$('#ancestorLbl').text(),
                              'subcategory':$('#breadCrumbLbl').text(),
                              'variant': $('div').find('[data-id=\"ddldynamiccolor\"] span').text(),                                  'quantity':'1'
                           }]
                        }
                       }
                       }); href="#"> send Gtm </a>

我需要发送带引号的数据，但如果我为

添加引号

$('#ancestorLbl').text()

如果我将双引号onclick关闭，则将其视为字符串。

与

相同的问题

$('div').find('[data-id=\"ddldynamiccolor\"] span').text()

在这种情况下除了引号周围我还需要使用数据选择器的引号。请建议我如何解决此问题的方法是link to fiddle。谢谢

Answer 1

当您尝试将大量代码放入内联函数调用时，就会出现问题。虽然可以通过一定数量的转义字符和删除空格/换行来完全实现，但我觉得不建议为您提供更优雅的解决方案是错误的。

选项A - 调用函数

创建一个包含所有代码的函数，并从onclick事件中调用它。

选项B - 将代码动态绑定到元素

由于您已经在使用jQuery，因此可以使用on（）函数绑定到此元素。这将要求您为链接提供唯一标识符（除非您希望多个链接触发正确的代码）。

因此，请链接一个唯一标识符并删除onclick：

$('document').ready(function(){
  $('#comprar').on('click', function(){
    dataLayer.push({
      'event':addToCart,
      'ecommerce':{
        'remove':{
          'products':[{'name':'Playera Polo',
                              'id':'123456' ,
                              'price':'1340.0',                                                     
                              'category':$('#ancestorLbl').text(),
                              'subcategory':$('#breadCrumbLbl').text(),
                              'variant': $('div').find('[data-id="ddldynamiccolor"] span').text(),
                              'quantity':'1'
          }]
        }
      }
    });
  });
});

现在，当发生点击事件时，动态地将代码绑定到此链接

    <a title="Comprar" class="btn-pdp-bag" onclick=" dataLayer.push({'event':'addToCart','ecommerce':{'remove':{'products':[{'name':'Playera Polo','id':'123456','price':'1340.0','category':$('#ancestorLbl').text(),'subcategory':$('#breadCrumbLbl').text(),'variant': $('div').find('[data-id=\'ddldynamiccolor\'] span').text(),'quantity':'1'}]}}});" href="#"> send Gtm </a>

选项C - 保持内联

如果你真的需要保持内联，首先，你应该质疑为什么。然后你应该根除所有换行符（加上空格以保持整洁，但这不是绝对必要的。）并使用以下内容：

<div class="top_grow11"><a href="free-480x800-mobile-wallpapers.htm"><img class="aClassNameStartingWithaLetter"></img></a></div>

这完全取决于您使用哪种方法，但我推荐选项B，因为这样做更优雅。在这种方法中，您完全从HTML中抽象出javascript功能，因此您需要进行的任何更改只需要更改JS。您也可以将其放在单独的文件中并将其包含在您的页面上。

在推送事件GTM时嵌套引号的问题

1 个答案: