Google analytics - Use v4 API as standard (#502)

* Update lightbox and video embed docs with current video

* Updated the GA module to default to GA v4 API

* Updated docs for GA tracking page

* Add video controls

* Remove video tracking from video player, as now happens by default in GA4

* Compiled JavaScript

* Set debug mode for excluded environments

* Compiled JavaScript

* Updated package lock after npm install

* Version bump, to 14.2.0

* Update default account ID, removing test ID

* Add notice to console when old GA tag is being used.

* Export the `isExcludedEnvironment` function

* Export functions from the GA module

* Added a `logDeprecatedFunctionToConsole` function to log deprecated functions

* Reinstate deprecated functions and log to console

* Compiled JavaScript

* Add spread'ed arguments to deprecated functions so consumers don't throw errors.

* Ensure video lightbox element is the link, rather than any child elements.

* Compiled JavaScript

* Replicate Google Analytics `form_submit` event on successful Marketo form submissions.

* Compiled JavaScript

Author: edwardcasbon

dist/honeycomb.app.css

@@ -12,11 +12,24 @@
         <div class="band__inner-container">
             <h1 class="section-heading--style-guide">Google Analytics tracking</h1>
             <p>Use data attributes on elements to track their click with google analytics event tracking.</p>
-            <p>This will capture the data in both the current and universal analytics platforms.</p>
-
-            <h2 class="section-heading--style-guide">HTML</h2>
-            <p data-height="350" data-theme-id="0" data-slug-hash="yyzPwj" data-default-tab="html" data-user="redgatewebteam" class='codepen'>See the Pen <a href='http://codepen.io/edwardcasbon/pen/OPmKoG/'>Redgate - Google analytics tracking</a> by Edward Casbon (<a href='http://codepen.io/edwardcasbon'>@edwardcasbon</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
 
+            <code><pre>
+<span><</span>p
+    data-ga-track
+    data-ga-track-event="event-name"
+    data-ga-track-first-name="First"
+    data-ga-track-surname="Surname"
+    data-something-else="xyz"
+<span>></span>Click me<span><</span>/p<span>></span></pre></code>
+
+            <p
+                class="display--inline padded--tight background-color--grey color--white"
+                data-ga-track
+                data-ga-track-event="event-name"
+                data-ga-track-first-name="First"
+                data-ga-track-surname="Surname"
+                data-something-else="xyz"
+            >Click me</p>
 
             <h2 class="section-heading--style-guide">Options</h2>
             <table>
@@ -27,16 +40,10 @@ <h2 class="section-heading--style-guide">Options</h2>
                 </thead>
                 <tbody>
                     <tr>
-                        <td>Category</td><td>Category of the tracked event</td><td>null</td><td><code class="code">data-ga-track-category="Category"</code></td>
-                    </tr>
-                    <tr>
-                        <td>Action</td><td>Action of the tracked event</td><td>null</td><td><code class="code">data-ga-track-action="Action"</code></td>
-                    </tr>
-                    <tr>
-                        <td>Label</td><td>Label of the tracked event</td><td>null</td><td><code class="code">data-ga-track-label="Label"</code></td>
+                        <td>Event</td><td>Event name to track the event as</td><td>null</td><td><code class="code">data-ga-track-event="event-name"</code></td>
                     </tr>
                     <tr>
-                        <td>Value</td><td>Value of the tracked event</td><td>null</td><td><code class="code">data-ga-track-value="1"</code></td>
+                        <td>{Param}</td><td>Custom param to pass along with the event</td><td>null</td><td><code class="code">data-ga-track-name="Name goes here"</code></td>
                     </tr>
                 </tbody>
             </table>

dist/honeycomb.css

@@ -16,7 +16,7 @@ <h1 class="section-heading--style-guide">Lightbox</h1>
             <h2 class="section-heading--style-guide">Example</h2>
             <ul>
                 <li><a href="/assets/images/common/logo.png" class="js-lightbox">Lightbox</a></li>
-                <li><a href="//www.youtube.com/embed/O8iVLQ_Vnuw" class="js-lightbox--video">Lightbox (with video content)</a></li>
+                <li><a href="//www.youtube.com/embed/Zz8bdsPn01Q" class="js-lightbox--video">Lightbox (with video content)</a></li>
                 <li><a href="/" class="js-lightbox--iframe">Lightbox (with iframe content)</a></li>
                 <li><a href="/assets/images/common/logo.png" class="js-lightbox--image">Lightbox (with image content)</a></li>
                 <li><a href="#lightbox-inline-example" class="js-lightbox--inline">Lightbox (with inline content)</a></li>

dist/honeycomb.js

@@ -16,7 +16,7 @@ <h1 class="section-heading--style-guide">Video embedding</h1>
 
 
             <h2 class="section-heading--style-guide">Example inline embed</h2>
-            <div class="js-video-container video-container" data-video-id="O8iVLQ_Vnuw"></div>
+            <div class="js-video-container video-container" data-video-id="Zz8bdsPn01Q" data-video-controls="1"></div>
 
             <h2 class="section-heading--style-guide">Example background video</h2>
             <p>{Killed the autoplay example}</p>