Issue with nesting quotes while pushing event GTM

Question

I'm pushing events to GTM in onclick event of anchor tag the problem here is while getting the data through jQuery i'm unable use the quote(single or double) as it is breaking the code. I also tried escaping the quotes with \\(slash) and using XML " but still unable sort out the issue. Here is my code

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

I need to send the data with quote around but if i place quote for

$('#ancestorLbl').text()

it is considered as string if i place double quote onclick is getting closed.

same issue with

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

in this case in addition to quotes around i need to use quotes for data selector too. please suggest me how i can fix this issue here is the link to fiddle .Thanks

Answer 1

Your issue arises as you are attempting to put a large amount of code into an inline function call. Whilst it is perfectly achievable with a certain amount of escaping characters and removing whitespace/newlines, I feel it would be wrong not to suggest the more elegant solutions available to you.

Option A - call a function

Create a function with all your code in it and call it from your onclick event.

Option B - dynamically bind your code to the element

As you're already using jQuery you could use the on() function to bind to this element. This would require you to give the link a unique identifier (unless you want multiple links to fire the correct code).

So give you link a unique identifier and strip out the onclick:

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

Now dynamically bind your code to this link when the click event occurs

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

Option C - Keep it inline

If you really need to keep it inline, firstly, you should question why. Then you should eradicate all newlines (plus whitespace to keep it neat but this isn't absolutely necessary.) and use the following:

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

It's completely up to you which method you use but I recommend Option B as its a bit more elegant to do it this way. In this method you completely abstract the javascript functionality away from the HTML and therefore any changes you need to make only require a change to the JS. You can also put this in a separate file and include it on your page.