3

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>

screenshot

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>
Improve this question
3
  • I think using ga.js would make your life a little easier :) Commented Oct 17, 2017 at 14:51
  • could you explain how? I am using GA, and variables in my case go like this frontend > GTM > GA, FB, shareAsale, etc. Basically GTM is middle man plus powerful trigger manager. How ga.js can help? Commented Oct 17, 2017 at 17:09
  • For me it made my analytics look way cleaner and readable afterwards. Also if I remember correctly ga.js has a plug-in for GTM. Commented Oct 17, 2017 at 17:24

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

thank you for your reply, very helpful! To trigger action completion(to know when to push) is "And create the custom tag in GTM triggered by datepicker click" is good idea. Or should it be coded directly on the web page itself?
@get9 Both options are viable. For example, if you trigger an event when the datepicker is selected you could push its value to the dataLayer from GTM as well(since it is very easy to handle it). If you on the other hand have a callback to handle the click, then you should do it in your webpage.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.