Unable to pass a value from a function to a data layer array using javascript

Question

I am trying to collect the value (Showing 1 -10 of 74) in the below HTML

<body>
<p data-brackets-id="1217" class="search">

                <!--No Results Found-->
                <small data-brackets-id="1218" data-bind="visible:(searchResults().length == 0), html: translations.noResults" style="display: none;">No Results To Display Please Enter A Search Term Above</small>

                <!--Error Message-->
                <small data-brackets-id="1219" class="error-message" data-bind="visible:errorMessage, html:errorMessage" style="display: none;"></small>

                <!--Search Result Count-->
                <small data-brackets-id="1220" data-bind="html:currentlyShowing, visible:(searchResults().length > 0)">Showing 1 -10 of 19300</small>
            </p>
</body>

by using a window.onload function

/** * returns the text for "Showing 1 -10 of 19300" after page loads and pass the value to the dataLayer. */

function showing () {
    var showResults = document.querySelector(".search small :nth-child(3)").innerHTML;
}

window.onload = showing;

and pass into a dataLayer object (search Results) so that google analytics can grab the value from the dataLayer.

<!-- start dataLayer -->
<script>
    var adobeInfo = {
            pageInfo: {
                'pageType': "welcome page",
                'Search Results': showResults
            }
    }

  <!-- end dataLayer -->

however I can't seem to pass the value of the querySelector to the dataLayer as I keep getting "undefined". is it the windows.onload that isn't allowing me to pass the value or am I just using the wrong code syntax for what I need in order to accomplish this task?

thank you for any help in advance.

<body>
<p data-brackets-id="1217" class="leader-1 no-trailer">
<!--No Results Found-->
<small data-brackets-id="1218" data-bind="visible:(searchResults().length == 0), html: translations.noResults" style="display: none;">No Results To Display Please Enter A Search Term Above</small>

<!--Error Message-->
<small data-brackets-id="1219" class="error-message" data-bind="visible:errorMessage, html:errorMessage" style="display: none;"></small>

<!--Search Result Count-->
<small data-brackets-id="1220" data-bind="html:currentlyShowing, visible:(searchResults().length > 0)">Showing 1 -10 of 74</small>
</p>

<script>  
function results () {
    alert(" alert inside results function");
    var showResults = document.querySelector("leader-1.no-trailer :nth-child(3)").innerHTML; // get the results of the showing info from search page.
    showResults.select();
}

window.onload = results();
</script>

  
<!-- Use dataLayer object to pass values to analytics -->

<script>
    var dataLayer = {
            pageInfo: {
                'pageType': "welcome page",
                'show Results': showResults // value of show results should go here (Showing 1 -10 of 74)
            }
         }
</script>

</body>

so I guess my real question is how do I pass the value of a window.onload function to a global variable so that I can pass it to my dataLayer?

all else aside, you don't actually reference dataLayer anywhere... how are you attempting to interact with it? — aw04, Sep 13 '16 at 17:56
Please show more of your code. It's not possible to determine the issue just from this code snippet. — Matt Browne, Sep 13 '16 at 18:11
You assign **result** of `results` function (that is `undefined`) to `window.onload` handler. — Alex Kudryashev, Sep 13 '16 at 18:19
Ok, I modified the code and added the javascript and data layer to the html.I am trying to pull the value of var "showResults" which happens after page load and push the value (Showing 1 -10 of 74) to the data Layer object for "Show Results". Sorry if I am confusing and not being clear. — Scott Tavares, Sep 13 '16 at 20:41

score 0 · Accepted Answer · answered Sep 14 '16 at 00:06

Setting showResult outside of datalayer makes the program hard to read and debug. My Suggestion is define a loader for the data layer like bellow:

var dataLayer = {
  pageInfo: {
    'pageType': "welcome page",
  },
  load: function() {
    this.showResults = document.querySelector("leader-1.no-trailer :nth-child(3)").innerHTML; // get the results of the showing info from search page.
    this.showResults.select();
  }
}


// windows onload event
windows.onload = function() {
  dataLayer.load();
}

Unable to pass a value from a function to a data layer array using javascript

1 Answers1