Values from XSL parameters are showing up as undefined in GA4 select_item event

Question

I'm working on converting our Universal Analytics dataLayer into the GA4 format, and as part of this I need to create events to collect data that would previously have been passively sent on pageload with the pageview tag.

The add_to_cart function works fine, so I thought it would be straightforward to add a select_item function that operates in the same way, but instead all the attributes are returning undefined.

          <xsl:apply-templates select="/root/Products/Product" mode="dataLayer"></xsl:apply-templates>

<script>
                window.onload = function() {
                     addAttributes();
                     $("input.SelectItemButton").click(selectItem);
                }

                

                function addAttributes() {
                     var selButton = document.getElementsByClassName("SelectItemButton");
     
                     for <![CDATA[(var i=0; i<selButton.length; i++)]]> {
                          selButton[i].setAttribute("data-name", $('input:hidden[name=selName]').val());
                          selButton[i].setAttribute("data-id", $('input:hidden[name=selId]').val());
                          selButton[i].setAttribute("data-brand", $('input:hidden[name=selBrand]').val());
                          selButton[i].setAttribute("data-category", $('input:hidden[name=selCategory]').val());
                          selButton[i].setAttribute("data-variant", $('input:hidden[name=selVariant]').val());
                          selButton[i].setAttribute("data-finish", $('input:hidden[name=selFinish]').val());
                          }
                    }


                function selectItem() {
                    dataLayer.push({
                        event: "select_item",
                        ecommerce: {
                            item_list_id: "related_products",
                            item_list_name: "Related products",
                            items: [
                            {
                              item_id: $(this).attr('data-id'),
                              item_name: $(this).attr('data-name'),
                              index: 0,
                              item_brand: $(this).attr('data-brand'),
                              item_category: $(this).attr('data-category'),
                              item_category2: $(this).attr('data-finish'),
                              item_list_id: "related_products",
                              item_list_name: "Related Products",
                              item_variant: $(this).attr('data-variant'),
                            }
                            ]
                        }
                    });
                }

            </script>

and then further down in the xml package is the referenced xsl template:

           <xsl:template match="Product" mode="dataLayer">
                <xsl:param name="selName"><xsl:value-of select="Name" /></xsl:param>
                <xsl:param name="selId"><xsl:value-of select="ProductID" /></xsl:param>
                <xsl:param name="selBrand"><xsl:value-of select="MaterialList" /></xsl:param>
                <xsl:param name="selCategory"><xsl:value-of select="ShapeList" /></xsl:param>
                <xsl:param name="selVariant"><xsl:value-of select="GradeList" /></xsl:param>
                <xsl:param name="selFinish"><xsl:value-of select="Finish" /></xsl:param>

                $(document).ready(function() {
                <input type="hidden" name="selName" value="{$selName}" />
                <input type="hidden" name="selId" value="{$selId}" />
                <input type="hidden" name="selBrand" value="{$selBrand}" />
                <input type="hidden" name="selCategory" value="{$selCategory}" />
                <input type="hidden" name="selVariant" value="{$selVariant}" />
                <input type="hidden" name="selFinish" value="{$selFinish}" />
                });
            </xsl:template>

I suspect that the problem might be that something's not happening in the right order, but when I've tried to move the xsl template around to different places it breaks the whole page. I know the addAttributes() function runs because it does add the attributes - it just doesn't assign them values. Where am I going wrong?

Answer 1

It turns out the answer was to start over and simplify things...a lot.

<script>
   window.dataLayer = window.dataLayer || [];
   $(document).ready(function() {
        $("input.SelectItemButton").click(selectItem);
    });
    function selectItem() {
        alert("Hello! I am an alert box!!");
        dataLayer.push({ ecommerce: null });
        dataLayer.push(<xsl:apply-templates select="/root/Categories/Category" mode="dataLayer"></xsl:apply-templates>);
                    }
</script>

and

<xsl:template match="Category" mode="dataLayer">
<xsl:if test="position() = last()">{
  event: "select_item",
  ecommerce: {
    item_list_id: "related_products",
    item_list_name: "Related products",
    items: [
    {
      item_id: "SKU_12345",
      item_name: 'Name',
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 2.22,
      index: 0,
      item_brand: '<xsl:value-of select="MaterialList" />',
      item_category: '<xsl:value-of select="ShapeList" />',
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: '<xsl:value-of select="GradeList" />',
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 10.01,
      quantity: 3
    }
    ]
  }
}
</xsl:if></xsl:template>

It still needs some work and a bunch of things filled in, but I think it's heading in a better direction now. Thanks to the commenters for their feedback that sent me in a better direction!