Add custom ID to Wordpress Audio Player Play Butto

Question

I have a page with several players on it and a click event setup in Google Tag Manager. That said the play button that is clicked has no class or id for the tracking to label it with. I need to give each players play button a unique class or ID that when clicked has something to pass to GTM.

Basically when the player shows on my site it comes in as:

<button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button>

And I would like it to be:

<button type="button" aria-controls="mep_0" title="Play" aria-label="Play" id="audio title or some unique identifier"></button>

Thank you all in advance.

Answer 1

I was researching this very issue and came up with a solution. Its a bit hacky but it does work for my needs.

it requires a hack to wpincludes/mediaelements/mediaelement-and-player.min.js (I plan an creating a plugin to to do this at some point...)

Find the section for the play button add a new id and class to the button. The id is grabbed by google tag manager and the class is updated with the post title.

('<div class="mejs-button mejs-playpause-button mejs-play" ><button id="perplay" class="playername" type="button" aria-controls="'+g.id+'" title="'+h.playText+'" aria-label="'+h.playText+'"></button></div>').

In each wordpress theme content page (content.php, content-single.php, content-front.php, etc)

Find the audio/video section

<div class="entry-content video">

<!-- Underneath it add the following code -->

<!-- hack to add podcast name (post title) to the player button class -->
    <?php $x = get_the_title(); // gets post title ?>   
    <script>
        <!-- js to find element with class name of playername and append the class name with the post title -->
        document.addEventListener('DOMContentLoaded', function() {
         document.getElementsByClassName('playername')[0].className = " <?php  echo $x; ?>";
})
</script>

in my case I was then able to get the element.css value in Google tag manager and use that to track what audio file was played and on which page it was played on.

If you need to track more than one audio file per post you could probably get the media id and use that instead of the post title - tho in GA you would need a lookup table if you have a lot of IDs.

Answer 2

What plugin are you using for that audio player ?

In order to do that, you have to change the shortcode of this plugin so it will allow to put another param in the shortcode, for example :

[myplayer file="mymusic.mp3" id="1"]

Then in the php file, you can put the new param "id" in the generated html.

Answer 3

Surely there is something unique about the buttons to play different audio, but you may be able to do something like this:

(I don't know if this has to exist before tag manager loads up)

const buttons = document.querySelectorAll('button[aria-label="Play"]');
for(let i = 0; i < buttons.length; i++){
	buttons[i].setAttribute('id', 'playBttn'+i);
}
console.log(buttons);

<button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button>
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button>
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button>
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button>
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button>