javascript - 特定操作后将变量传递给 GTM 数据层

Question

正如标题所说，我需要在操作完成后将变量传递给 GTM 数据层。更具体地说，我想在日期选择器中选择日期后将游览日期传递给 GTM 层。

我不知道怎样做才是正确的。现在我有以下数据层脚本:

<script >
    var dataLayer = [({
        "customerLoggedIn": 0,
        "customerId": 0,
        "customerGroupId": "1",
        "customerGroupCode": "GENERAL",
        "productId": "6",
        "productName": "Big Loop Boat Tour",
        "productSku": "boat-tour",
        "productPrice": "0.00",
        "productPriceExcludingTax": "0.00",
        "productTax": "0.00",
        "productTaxRate": 0,
        "productGender": false,
        "pageType": "catalog\/product\/view"
    })];
    dataLayer.push({
        'ecommerce': {
            "detail": [{
                "id": "6",
                "name": "Big Loop Boat Tour",
                "sku": "boat-tour",
                "price": 0,
                "priceexcludingtax": "0.00",
                "tax": "0.00",
                "taxrate": 0,
                "brand": "",
                "gender": false,
                "category": null,
                "children": []
            }]
        }
    });
    (function(w, d, s, l, i) {
        if (i == '') {
            return console.log('No GTM ID provided');
        }
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'XXXXXXXX');
</script>

我应该在 dataLayer 数组中添加额外的变量吗？比如说 selectedDate，它将在页面加载时未定义。

    var dataLayer = [({
        "customerLoggedIn": 0,
        "customerId": 0,
        "customerGroupId": "1",
        "customerGroupCode": "GENERAL",
        "productId": "6",
        "productName": "Big Loop Boat Tour",
        "productSku": "boat-tour",
        "productPrice": "0.00",
        "productPriceExcludingTax": "0.00",
        "productTax": "0.00",
        "productTaxRate": 0,
        "productGender": false,
        "pageType": "catalog\/product\/view"
        "selectedDate" : ""
    })];

将 javascript 函数添加到页面以获取选定的日期并将其写入变量 $date.selected。

并使用此自定义脚本在日期选择器点击触发的 GTM 中创建自定义标签

<script>
    dataLayer.push({"selectedDate": $date.selected});    
</script>

这看起来对吗？

或者我可以像这样在主数据层脚本中传递变量吗？

<script >
    var dataLayer = [({
        "customerLoggedIn": 0,
        "customerId": 0,
        "customerGroupId": "1",
        "customerGroupCode": "GENERAL",
        "productId": "6",
        "productName": "Big Loop Boat Tour",
        "productSku": "boat-tour",
        "productPrice": "0.00",
        "productPriceExcludingTax": "0.00",
        "productTax": "0.00",
        "productTaxRate": 0,
        "productGender": false,
        "pageType": "catalog\/product\/view",
        "selectedDate": $date.selected
    })];
    dataLayer.push({
        'ecommerce': {
            "detail": [{
                "id": "6",
                "name": "Big Loop Boat Tour",
                "sku": "boat-tour",
                "price": 0,
                "priceexcludingtax": "0.00",
                "tax": "0.00",
                "taxrate": 0,
                "brand": "",
                "gender": false,
                "category": null,
                "children": []
            }]
        }
    });
    (function(w, d, s, l, i) {
        if (i == '') {
            return console.log('No GTM ID provided');
        }
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'XXXXXXXX');
</script>

Answer 1

无需在开始时将变量定义为未定义(或空字符串)。当您的操作完成时，只需将您想要的值推送到 dataLayer。对于您的情况，由于用户可能会改变主意并再次更改日期选择器值，因此可能会在 dataLayer 中多次推送新日期。

每次您向 dataLayer 添加内容时，都会推送一条新的“消息”。将 dataLayer 视为包含您推送的所有消息的数组。

在页面加载时初始化只会添加一个没有值的变量条目。