wordpress: use custom jquery variable in header

Question

Is there a way, to access DOM Object with jQuery in the header of all sites?

I'm using wordpress with the course-theme WPLMS. My goal is to track, how may users are in a specific section, but with the Theme there is just on URL for all sections like ../course. I want to track ../course/section.

So I want to send custom data via the analytics.js, but I guess, the DOM element, which I'm trying to access using the jQuery selector, doesn't exist at this time. Here is my external js file:

//Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');

jQuery( document ).ready(function() {
   ga('create', 'UA-XXXXXXXX-X', 'auto');


            var section= jQuery( '.unit_line.active' ).children('a').text();

            var custompage = '/course/' + section;
            //section is empty at this point

            ga('send', 'pageview', custompage);

            ga(function(tracker) {
                           console.log(tracker);
                           console.log(tracker.get('trackingId'));
                           console.log(tracker.get('location'));
                           console.log(tracker.get('page'));
            });

});

The jQuery Selector works just fine. It works also in the footer area. Because of that I guess the problem is, that the Object doesn't exist at this time in the header? But shouldn't be the ready(function() {}); handle exactly this stuff?