Understanding Matomo

[iwato]

Although by no means fully recovered from a recent machine failure, I am back on the road in a much weakened condition.

Please consider the following piece of code and correct me where my interpretation of the code is in error.

<!-- Matomo -->
<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
        var u="//{$PIWIK_URL}/";
        _paq.push(['setTrackerUrl', u+'piwik.php']);
        _paq.push(['setSiteId', {$IDSITE}]);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
    })();
</script>
<!-- End Matomo Code -->

My interpretation of same

            var _paq = _paq || [];           
            _paq is an array that is initialized as empty or some preassigned value.
            
            _paq.push(['trackPageView']);           
            Add a new element to _paq whose key-value pair is 'trackPageView' : undefined

            var u="//{$PIWIK_URL}/";           
            Create a variable called called u and assign to it the following string "// + some.domain.name + /".
            
            _paq.push(['setTrackerUrl', u+'piwik.php']);           
            Add a new element to _paq whose key-value pair is 'setTrackerUrl' and u + piwik.php, respectively.
            
            var d=document, g=d.createElement('script'),s=d.getElementsByTagName('script')[0];           
            Create three variables named d, g and s whose values are
            
            d:  the DOM document
            g:  the name of a newly created element called 'script'
            s:  an empty index array called 'script'
            
            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);           
            The resulting script tag should appear as follows:
            
            <script text='javascript' async='true' defer='true' src= 'u + piwik.js'></script>
            
            function()();
            
            Run the function upon loading the document in which it is contained.

Roddy

[justsomeguy]

Add a new element to _paq whose key-value pair is 'trackPageView' : undefined

No, that adds a new item to the array.  The new item is an array with 1 item in it, "trackPageView".  So, if _paq was an empty array, then _paq[0][0] would be "trackPageView".  trackPageView is a value, not a key.

 Add a new element to _paq whose key-value pair is 'setTrackerUrl' and u + piwik.php, respectively.

Those are both values, not keys.  That is an array with 2 values being added to _paq.  Values listed in an array are separated by commas.  Technically, Javascript does not have arrays with string keys, all array keys are numeric.  But since everything in Javascript is technically an object, even an array, then you can represent an array as an object structure where the property names are strings.  You can refer to those using either array or object syntax.

s:  an empty index array called 'script'

No, that's getting the first script tag on the page, so it assumes there's at least one.  getElementsByTagName returns a collection of elements, so it's getting the first element in that collection.  Later it uses that script element as the reference to insert the new one.

The resulting script tag should appear as follows:

            
            <script text='javascript' async='true' defer='true' src= 'u + piwik.js'></script>

It would look like this:

<script type="text/javascript" async="true" defer="true" src="value_of_variable_u/piwik.js"></script>

function()();

            
            Run the function upon loading the document in which it is containe

Note that the entire function expression needs to be wrapped in parentheses:

(function expression)();