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 7.0.0.7)
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() {
addAttributes();
$("input.AddToCartButton").click(addToCart);
}
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() {
dataLayer.push({
'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>
</xsl:template>
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!
