推送事件 GTM 时出现嵌套引号问题

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：

<a id="comprar" title="Comprar" class="btn-pdp-bag" href="#"> send Gtm </a>

现在当点击事件发生时动态绑定你的代码到这个链接

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

选项 C - 保持内联

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

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

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