Pass variable to GTM Data Layer after specific action

Question

As the title says I need to pass variable to GTM Data Layer after action is done. To be more specific I would like to pass tour date to GTM Layer after date is selected in datepicker.

I don’t know what’s the right way to do it. Right now I have the following data layer 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"
    })];
    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>

Should I add additional variable into dataLayer array? let say selectedDate, it will be undefined on page load.

    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" : ""
    })];

Add javascript function to the page to get selected date and write it let say in variable $date.selected.

And create the custom tag in GTM triggered by datepicker click, with this custom script

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

Does this seem right?

Or can I just pass variable in the main data layer script like this?

<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

There is no need to define the variable as undefined(or empty string) at the start. Just push the value you want to the dataLayer when your action is completed. For your case, since a user might change his/her mind and change the datepicker value again its possible that a new date will be pushed multiple times in the dataLayer.

Each time you add something to the dataLayer a new "message" will be pushed. Think of the dataLayer as an array that contains all the the messages you pushed.

Initializing at the page load will just add one more entry of your variable with no value.