推送事件時嵌套報價問題GTM

Question

我推動GTM事件發生在onclick錨標記事件這裏的問題是通過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您可以使用上（）函數來綁定到這個元素代碼動態綁定的元素

。這將要求你給鏈接一個唯一的標識符（除非你想要多個鏈接來激發正確的代碼）。

所以給你鏈接一個唯一的標識符，剝離出的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爲這樣做更高雅一點。在這種方法中，您完全從HTML中抽象出JavaScript功能，因此您需要進行的任何更改只需要對JS進行更改。你也可以把它放在一個單獨的文件中，並將其包含在你的頁面上。