Added Google Tag Manager's Spotify Audio Tag actual implementation code and GTM's artifacts as JSON, and also a concise description the tag's features.

Author: tomasfn87

gtm/spotify-audio.json.md

@@ -1,24 +1,19 @@
-# [Spotify](https://www.spotify.com) Audio Tag for [Google Tag Manager](https://tagmanager.google.com)
+# [`Spotify`](https://www.spotify.com) Audio Tag for [Google Tag Manager](https://tagmanager.google.com)
 
 ## Description
 
-- **Custom HTML Tag** for [***Google Tag Manager***](https://tagmanager.google.com) which is able detect which content is being played and how far it's been played, as integer percentage values between 1 and 99;
+- **Custom HTML Tag** for [***Google Tag Manager***](https://tagmanager.google.com) which is able detect which content is being played and how far it's been played, as integer values between 1 and 99 in percentage and as floting point values as seconds;
 - No actual human friendly information is availabe *(no **episode**, **track**, **artist**, **album**, **playlist** or **show name** will be captured even though it might be viable via **DOM Scraping**)*:
-- Each content is identified by a [`Spotify URI`](https://developer.spotify.com/documentation/web-api/concepts/spotify-uris-ids), which consist of three parts:
+- Each content is identified by a [`Spotify URI`](https://developer.spotify.com/documentation/web-api/concepts/spotify-uris-ids), which consists in three parts:
   - `{platform}` **:** `{content type}` **:** `{identifier}`;
   - ***Examples:***
     - `spotify` **:** `album` **:** `7Ff0Q5oeEoVKHtxJJoXyId`;
     - `spotify` **:** `artist` **:** `1on7ZQ2pvgeQF4vmIA09x5`;
     - `spotify` **:** `episode` **:** `5DVGuabuaHaC9UxQodcyvf`;
     - `spotify` **:** `playlist` **:** `0E6htK22DGE5d4jj3r6dmS`.
-  - Different ***tracks*** executed within a ***playlist*** are identified only by their **duration** *(no human-readable identifiers were available in the event data)*:
-    - This allows us to count how many tracks where executed (*partially or completely*) within a grouped content (*playlist, artists or album*).
+  - Different ***tracks*** executed within a ***playlist*** are identified only by their **duration**:
+    - This allows us to count how many **tracks** where executed (*partially or completely*) within a grouped content (*playlist, artists or album*).
  - **Show URLs** (*i.e. [`open.spotify.com/show/3bdzILat9px7eH27ziXl8K`](https://open.spotify.com/show/3bdzILat9px7eH27ziXl8K)*) redirect to the show's last episode;
- - Any URI can be transformed into a [`open.spotify.com`](https://open.spotify.com) link following the **template** below:
-   - **`URI`**:
-     - `spotify` **:** `album` **:** `7Ff0Q5oeEoVKHtxJJoXyId`.
-   - **`URL`**:
-     - `https://open.spotify.com` **/** `album` **/** `7Ff0Q5oeEoVKHtxJJoXyId`.
 
 ---
 
@@ -29,18 +24,35 @@
 - `audio_playback_resumed`;
 - `audio_complete`;
 - `audio_progress`:
-  - ***Detected percentages*** values are **configured** and **validated** in the `Spotify audio Custom HTML tag` (i.e. `[ 25, 50, 75 ]`).
+  - ***Detected percentages values*** are **configured** and **validated** in the `Spotify audio Custom HTML tag` (i.e. `[ 25, 50, 75 ]`).
+
+---
+
+## Tag Parameters
+
+- `audio_content`;
+- `audio_current_time`;
+- `audio_duration`;
+- `audio_percent`;
+- `audio_provider`;
+- `audio_status`.
 
 ---
 
 ## `JavaScript` function to convert **Spotify's** ***URI*** into ***URL***
 
+- Any URI can be transformed into a [`open.spotify.com`](https://open.spotify.com) link by following the **template** below:
+   - **`URI`**:
+     - `spotify` **:** `album` **:** `7Ff0Q5oeEoVKHtxJJoXyId`.
+   - **`URL`**:
+     - `https://open.spotify.com` **/** `album` **/** `7Ff0Q5oeEoVKHtxJJoXyId`.
+
 ```javascript
 (function getSpotifyUrlfromUri(uri) {
-    var reSpotifyURI = /spotify:(album|arist|episode|playlist|show|track):([^:\/?#&]+)/i;
+    var reSpotifyUri = /spotify:(album|arist|episode|playlist|show|track):([^:\/?#&]+)/i;
     var result = { spotify_uri: uri, spotify_url: '' };
-    if (reSpotifyURI.test(uri)) {
-        var matches = reSpotifyURI.exec(uri);
+    if (reSpotifyUri.test(uri)) {
+        var matches = reSpotifyUri.exec(uri);
         var contentType = matches[1];
         var contentId = matches[2];
         result.spotify_url = `https://open.spotify.com/${contentType}/${contentId}`;
@@ -51,22 +63,39 @@
 );
 ```
 
-### Output
+### Expected Output
 
 ```javascript
 {
-  spotify_uri: 'spotify:album:7Ff0Q5oeEoVKHtxJJoXyId',
-  spotify_url: 'https://open.spotify.com/album/7Ff0Q5oeEoVKHtxJJoXyId'
+    spotify_uri: 'spotify:album:7Ff0Q5oeEoVKHtxJJoXyId',
+    spotify_url: 'https://open.spotify.com/album/7Ff0Q5oeEoVKHtxJJoXyId'
 }
 ```
 
 ---
 
-## Importing **Tags**, **Triggers** and **Variables**
+## Pre-Configuration: Spotify's IFrame
+
+```html
+<iframe src="https://open.spotify.com/embed/track/3qN5qMTKyEEmiTZD38CmPA" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
+<script>
+// Send a message to the Spotify player to let it know our domain
+var spotifyPlayer = document.querySelector('iframe[src^="https://open.spotify.com"]');
+spotifyPlayer.contentWindow.postMessage({
+  type: 'listeningOn',
+  domain: window.location.hostname,
+  gtmId: 'YOUR-GTM-CONTAINER-ID'
+}, 'https://open.spotify.com');
+</script>
+```
+
+---
+
+## Importing **Tags**, **Triggers** and **Variables** in `Google Tag Manager`
 
 - Save the `JSON` below to a file and **import** it in [*Google Tag Manager*](https://tagmanager.google.com):
   - [`Admin`](https://tagmanager.google.com/#/admin) > `Import Container`.
-- Add a constant named `{{GA - Property ID}}` with your **[Google Analytics 4](https://analytics.google.com)'s Property ID**.
+- Add a constant named `{{GA4 - Property ID}}` with your **[Google Analytics 4](https://analytics.google.com)'s Property ID**.
 
 ### Google Tag Manager Exported Container `JSON` file