Benutzerdefinierte ID zu Wordpress Audio Player Play Button hinzufügen?

Question

Ich habe eine Seite mit mehreren Spielern und eine Click-Event-Einrichtung im Google Tag Manager. Das besagt, dass die Play-Schaltfläche, auf die geklickt wird, keine Klasse oder ID für das Tracking hat, mit dem es beschriftet werden soll. Ich muss jedem Spieler eine einzigartige Klasse oder ID geben, die, wenn er angeklickt wird, etwas an GTM weitergeben kann.

Grundsätzlich, wenn der Spieler auf meiner Seite zeigt kommt es als:

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

Und ich würde es sein mag:

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

Ihnen allen im Voraus danken.

Answer 1

Sicherlich gibt es etwas Einzigartiges über die Tasten verschiedene Audio zu spielen, aber Sie können in der Lage sein, so etwas zu tun:

(ich weiß nicht, ob dies vor dem Tag Manager Lasten existieren muss nach oben)

const buttons = document.querySelectorAll('button[aria-label="Play"]'); 
 
for(let i = 0; i < buttons.length; i++){ 
 
\t 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>

Answer 2

Was Plugin sind Sie für die Audio-Player verwenden?

Um das zu tun, müssen Sie die Kurzwahlnummer des Plugins ändern, so dass es eine andere param in dem Shortcode erlauben zu setzen, zum Beispiel:

[MyPlayer file = „mymusic.mp3“ id =“ 1 "]

Dann können Sie in der PHP-Datei den neuen Parameter" id "in das generierte HTML einfügen.

Answer 3

Ich recherchierte genau dieses Problem und kam mit einer Lösung. Es ist ein bisschen hacky, aber es funktioniert für meine Bedürfnisse.

es einen Hack zu wpincludes erfordert/mediaelements/Media-and-player.min.js (ich plane ein Plugin zu schaffen dies irgendwann zu tun ...)

den Abschnitt für das Spiel finden Schaltfläche fügen Sie der Schaltfläche eine neue ID und eine neue Klasse hinzu. Die ID wird vom Google Tag Manager erfasst und die Klasse wird mit dem Beitragstitel aktualisiert.

('<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 jedem Wordpress Theme Content-Seite (content.php, Content-single.php, Content-Front.php usw.)

Finden Sie die Audio/Video-Sektion

<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 In meinem Fall war ich dann in der Lage, den Wert von element.css im Google Tag Manager abzurufen und damit zu verfolgen, welche Audiodatei abgespielt wurde und auf welcher Seite sie abgespielt wurde.

Wenn Sie mehr als eine Audiodatei pro Beitrag verfolgen möchten, könnten Sie wahrscheinlich die Medien-ID erhalten und diese anstelle des Beitragstitel verwenden - in GA würden Sie eine Nachschlagetabelle benötigen, wenn Sie viele IDs haben.