I'm working on implementing Google's enhanced ecommerce tracking using Google Tag Manager and am having trouble getting the product information to send correctly when a customer adds an item to their shopping cart.  (Using AspDotNetStorefront ML version

Because the add to cart button is generated in a form and is not editable in the XML package, I wrote a javascript function to add the attributes I needed to the button in order to send all of the product information to the dataLayer:

window.onload = function() {

function addAttributes() {
     var atcButton = document.getElementsByClassName("AddToCartButton");
     for (var i=0; i<atcButton.length; i++) {
          atcButton[i].setAttribute("data-name", "{$atcName}");
          atcButton[i].setAttribute("data-id", "{$atcId}");
          atcButton[i].setAttribute("data-price", "{$atcPrice}");
          atcButton[i].setAttribute("data-brand", "{$atcBrand}");
          atcButton[i].setAttribute("data-category", "{$atcCategory}");
          atcButton[i].setAttribute("data-variant", "{$atcVariant}");
          atcButton[i].setAttribute("data-quantity", "{$atcQuantity}");
          atcButton[i].setAttribute("data-length", "{$atcLength}");

function addToCart() {
                     'event': 'addToCart',
                     'ecommerce': {
                            'currencyCode': 'USD',
                            'add': {
                                'products': [{
                                      'name': $(this).attr('data-name'),                      // Name or ID is required.
                                      'id': $(this).attr('data-id'),
                                      'price': $(this).attr('data-price'),
                                      'brand': $(this).attr('data-brand'),
                                      'category': $(this).attr('data-category'),
                                      'variant': $(this).attr('data-variant'),
                                      'quantity': $(this).attr('data-quantity'),
                                      'metric1': $(this).attr('data-length')


All of the above javascript works pretty much as expected--it adds all the attributes to the Add To Cart button, and it fires the addToCart tag in GTM, but I can't get it to send the actual product name/ID/price/etc.  All that's actually getting sent to the datalayer are the literal strings $atcName, $atcId, etc.
In the XML package, I created parameters that should be generating the correct values for product name/ID/price/etc:
<xsl:template match="Product" mode="parameters">

<xsl:param name="atcName"><xsl:value-of select="Name" /></xsl:param>
<xsl:param name="atcId"><xsl:value-of select="ProductID" /></xsl:param>
<xsl:param name="atcPrice"><xsl:value-of select="Price" /></xsl:param>
<xsl:param name="atcBrand"><xsl:value-of select="Material" /></xsl:param>
<xsl:param name="atcCategory"><xsl:value-of select="Shape" /></xsl:param>
<xsl:param name="atcVariant"><xsl:value-of select="Grade" /></xsl:param>
<xsl:param name="atcQuantity"><xsl:value-of select="VariantName" /></xsl:param>
<xsl:param name="atcLength"><xsl:value-of select="LengthEditable" /></xsl:param>


I'm not sure if the problem is in the XML package, ie that the parameters are not actually getting the correct values in the first place, or if the problem has to do with communication between my javascript functions and the XML package.
Any ideas?  Thanks!
in ML by (110 points)

2 Answers

0 votes

Hi KarenTF,

If I'm reading this correctly, unless you're rendering the javascript within the xml package, those {$atcName} variables won't be filled in with the correct values from the xml package parameters.

If you put that script into the xmlpackage and wrap it in jquery document.ready, that may render the values into your variables.

Alternatively, you could leave the script outside of the xml package but on the package render the values into hidden inputs and pull those values into your script.

For example, in the xml package after your parameter listing, do:

<input type="hidden" name="atcName" value="{$atcName}">

and in your script do

atcButton[i].setAttribute("data-name", "$('input:hidden[name=atcName]').val()");

You may need to use the $(document).ready() jquery function to ensure that the page renders the hidden fields before your addAttributes() function runs.

This is all off the top of my head and I haven't tested this, so I could be quite wrong here, but that's my guess.

by (780 points)

I tried the hidden inputs, but sadly, it just returned the string


instead of filling in the values.

I have to keep the javascript in a separate file, though, because if I put it in the XML package, it breaks the package.  For some reason it doesn't like the semicolon in this line:

for (var i=0; i<atcButton.length; i++)

and gives me this error message:

Exception=Error in XmlPackage(.Load), Package=[product.variantsintablecondensedinchmicrodata.xml.config], Msg=[Exception=The ';' character, hexadecimal value 0x3B, cannot be included in a name. Line 95, position 38.

so I'm not really sure where to go from here.  Thanks for your help so far though!  At least I have a better understanding of what the problem is!

Edit:  I re-read your post, and this showing up: $('input:hidden[name=atcName]').val()

means that javascript is treating that as a string instead of a jquery variable value.  I think the key may be removing the quotes around that in your javascript and see what happens?  Or maybe wrapping that in single quotes?  I honestly don't know off the top of my head here.  I would need to look it up and play around with it.

--pre edit text follows, which might be useful?

Hmm.  After putting the hidden inputs on the page, are the correct values showing in the inputs?

You'll need to view the page source and search for the <input name="atcName" and see if the value has the correct value.  If it's just showing value="{$atcName}"> then that's a problem and it may need to be just $atcName or use the value-of as Jan posted.

If the value is correct, then you need to ensure the javascript is running after the page has rendered.  This would be using document.ready as opposed to window.onload https://learn.jquery.com/using-jquery-core/document-ready/

If the page has run its course and the input values are correct, then you can open the console (f12 tools, developer tools, etc, depending on what browser you're using) and putting in the code $('input:hidden[name=atcName]').val(); and pressing enter should give you the correct value.

This is about all I can think of without seeing the code and page in the context in which it is running.  This should be achievable though.  If it was me I would have to run and test and fail a few times to get it working :)

Good luck.


Thanks this fixes it! The hidden inputs were there, and once I removed the quotes it all started working properly :)
0 votes

Also, just to add, if the $atcName etc variables are declared in your XmlPackage (per above 2nd shot), to render them within the script block you will actually need to use the xsl:value-of function instead of the parser...

So, if I'm understanding correct, as I can't test, try this:

atcButton[i].setAttribute("data-name", '<xsl:value-of select="$atcName" />');

I hope I didn't just waste your time :-)

Thank you,

Compunix, LLC (Phoenix, AZ)
AspDotNetStorefront Development Partner and Reseller since 2005
 AspDotNetStorefront add-ons and plugins : http://www.ecommercecartmods.com
  * Searching Filtering, Single Signons, Reviews Ratings, Reports, Integrations
 Complete Automotive Solution : http://www.autopartsshoppingcart.com
  * Auto + Aftermarket Parts solution
 Unlimited Custom Development : http://www.compunix.us/t-unlimited-custom-development.aspx
  * Unlimited with Quick turn-arounds!



by (6.9k points)