HTML5 Media plugin: allow CSS selectors

[Jethro Nederhof (jethron)]

Some users have reported that when using the GTM Tag Template with the HTML5 Media Tracking plugin, they are not able to pass their media elements directly to the plugin to enable tracking. The GTM Tag Template runs in a sandbox where DOM elements are replaced with null values when passed as arguments to functions created in the sandbox (i.e. the snowplow() command queue). If the element has an ID (or is a child of an element with an ID), you can work around this issue by passing the ID as a string; the plugin itself is not sandboxxed, so if it selects the element itself it finds the element successfully and proceeds as expected.

Unfortunately, if your element has no ID or ancestor with an ID, you can not use this workaround with the current implementation.

This extends the plugin to try using the passed ID string as a CSS selector to find an element (using document.querySelector()) if the passed string fails to succeed as an exact ID match. This allows the plugin to work on pages that don't use IDs often in their layout by using more complex CSS selectors.

This introduces an odd edge case where it may now match elements that previously did not match in cases where IDs happen to also be valid CSS selectors.
For example, if you had an element on one page like <video id="video" /> and on another page just had <video />, selecting via id: 'video':

• without this change only the first element would generate events
• with this change both elements will generate events.

I'm hoping this is rare enough to not be a big deal.

I have also updated the README to reflect this information, and the API changes from v4.0.0 which it seems it was not updated for. I have also made the media_element currentSrc value fallback to the src attribute if it has no value, as this has been reported as a source for invalid events. This should make the events valid but the state is still observable from the networkState field which should be NETWORK_NO_SOURCE when this is the case.