CODEWITHSUNDEEP
javascripthtmlgoogle-analyticsgoogle-tag-manager
rokenbk97
rokenbk97

Reputation: 47

Google Tag Manager - Capture Select Values

I am attempting to capture <select> values, push them to the Data Layer and push them to an Analytics account using Google Tag Manager. Here's the code I'm trying to scrape values from which contains a dynamic selected attribute: 

<select class="dropdown__select" size="1" id="dyeMethod" name="dyeMethod" onchange="javascript:UpdateSearchResults('FilterSearchForm')">
                                        <option value="ALL">ALL</option>

        <option value="395" >
         Piece Dyed</option>            

        <option value="402"  selected="selected">
         Solution Dyed</option>            

        <option value="406" >
         Solution Dyed /  Yarn Dyed</option>            

                            </select>
                </div>
            </div>

First, I created a custom HTML tag to grab the proscribed values and push them to the Data Layer (tag code below): 

    document.addEventListener('change', function(e) {
      if (e.target.className === 'dropdown__select') {
        var selected = e.target.options ? e.target.options[e.target.value] : undefined;

        window.dataLayer.push({
          'event' : 'valueSelected',
          'selectedValue' : selected ? (selected.value) : ''
        });
      }
    };

This tag fires on DOM Ready and when 'valueSelected' is pushed to the data layer. I then created a Data Layer Variable ('selectedValue') and assigned it as the Event Label on a GA tag that fires only when the 'dropdown__select' class is selected.

The tags pass the category and and action along, but the label displays as '(not set)'. There must be a more efficient way to capture these values and pass them along!!

Upvotes: 2

Views: 2663

Answers (1)

mrbubu
mrbubu

Reputation: 484

DOM Ready and valueSelected are both values of event key so there is no way to fire custom HTML tag using both this rules in one trigger.

Try to fire custom HTML tag on DOM Ready and Google Analytics tag on event equals valueSelected.

Upvotes: 1

Related Questions