XSL 参数的值在 GA4 select_item 事件中显示为未定义

Question

我正在努力将 Universal Analytics 数据层转换为 GA4 格式，作为此过程的一部分，我需要创建事件来收集以前使用页面浏览量标签在页面加载时被动发送的数据。

add_to_cart 函数工作正常，所以我认为添加一个以相同方式操作的 select_item 函数会很简单，但所有属性都返回未定义。

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

然后在xml包中再往下就是引用的xsl模板：

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

我怀疑问题可能是某些事情没有按正确的顺序发生，但是当我尝试将 xsl 模板移动到不同的位置时，它会破坏整个页面。我知道 addAttributes() 函数会运行，因为它确实添加了属性 - 它只是不为它们分配值。我哪里错了？

Answer 1

事实证明，答案是重新开始并简化事情……很多。

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

和

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

它仍然需要一些工作和一堆东西来填补，但我认为它现在正朝着更好的方向发展。感谢评论者的反馈，让我朝着更好的方向前进！