bigCommerce - 如何将 GTM 放在结帐页面上？答案

【问题标题】：bigCommerce - How to put GTM on checkout page?bigCommerce - 如何将 GTM 放在结帐页面上？
【发布时间】：2021-09-30 06:50:30
【问题描述】：

我从未使用过这项技术（我也不打算使用），但我需要一个解决方案，了解如何在结帐页面上插入 GTM 分析。

基本上，我什至不知道结帐的代码在哪里。

请帮忙？

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    'event': 'purchase-gtm', 
    'ecommerce': {
        'purchase': {
            'actionField': {
                'id': '{{checkout.order.id}}', // order number
                'revenue': '{{checkout.order.total.value}}', // total transaction value (incl. tax and shipping)
                'tax':'{{ecommerce.tax}}',
                'shipping': '{{ecommerce.shipping}}'
            },
           'products': [
            {{#each checkout.order.items}}
            {
                'name': '{{name}}', //Product Name
                'id': '{{product_id}}', //Product ID
                'price': '{{price.value}}', //Product Price
                'brand': '{{brand.name}}', //Product Brand
                'category': '{{category}}', //Product Category
                'quantity': '{{quantity}}',
                'variant': '{{sku}}', //Product variant if applicable
            },
            {{/each}}
        ],
        }
    }
});
</script>

作为示例的代码。

【问题讨论】：

标签： javascript checkout bigcommerce

【解决方案1】：

对于 Cornerstone 模板主题，您需要的文件是 templates/pages/checkout.html。

您可能想在该行之后添加：

{{{head.scripts}}}

我还没有检查您的示例代码中的所有值，但这就是它应该去的地方。

我们实际上使用了一个稍微完整的解决方案。

我们没有将脚本放在页面中，而是更新了构建，以便将脚本缩小并且我们可以使用共享代码。

所以在{{{head.scripts}}} 之后我们有：

<script src="{{cdn 'assets/dist/theme-bundle.checkout.js'}}"></script>

然后在webpack.common.js 我们有：

    entry: {
        main: './assets/js/app.js',
        head_async: ['lazysizes'],
        polyfills: './assets/js/polyfills.js',
        checkout: './assets/js/checkout.js'
    },

我们将实际代码放入一个新文件/assets/js/checkout.js。

【讨论】：

【解决方案2】：

您需要使用 Storefront API 通过 JS fetch 收集适当的信息。确保从它们的包含查询字符串中获取所有行项目。我们只有实物产品，所以在下面的示例中，我们只包含这些。

您需要将所有订单项分组到一个数组中，然后在完成后将它们推送到 GTM 事件中。

这就是我们的做法，我相信您可以根据自己的情况进行调整。在结帐确认页面上也可以这样做。

fetch('/api/storefront/carts?include=lineItems.physicalItems.options',{credentials:'include'})
    .then(
        function(response) {
            if (response.status !== 200) {
                console.log('Looks like there was a problem. Status Code: ' + response.status);
                return;
            }

            // Examine the text in the response
            response.json().then(function(data) {
                var items = data[0].lineItems.physicalItems;

                // ==== GA4 Analytics
                var cartData = {
                    'event': 'begin_checkout',
                    'ecommerce': {
                        'items': []
                    }
                }

                // Insert order items into dataLayer
                for (var i = 0; i < items.length; i++){
                    var item = items[i],
                        variant = item.options[0] == undefined ? '' : item.options[0].value,
                        cartItem = {
                            'item_name': item.name,
                            'item_id': item.sku,
                            'price': item.extendedListPrice,
                            'item_variant': variant,
                            'quantity': item.quantity
                        }

                    cartData.ecommerce.items.push(cartItem);
                }

                dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
                dataLayer.push( cartData );
            });
        }
    );

【讨论】：