添加自定義ID到Wordpress音頻播放器播放按鈕？

我有一個包含多個播放器的頁面和Google跟蹤代碼管理器中的點擊事件設置。也就是說，點擊的播放按鈕沒有用於跟蹤的類或標識來標記它。我需要給每個玩家播放按鈕一個獨特的類或ID，點擊時有一些東西要傳遞給GTM。添加自定義ID到Wordpress音頻播放器播放按鈕？

基本上當玩家展示我的網站上它有如下：

<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" id="audio title or some unique identifier"></button>

謝謝大家提前。

來源

2017-06-01 Brandon Orndorff

當然有一些獨特之處的按鈕來播放不同的聲音，但你可以做這樣的事情：

（我不知道這有標籤管理器加載之前存在了）

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>

您使用該音頻播放器插件什麼

來源

2017-06-01 17:06:50 sesamechicken

沒有什麼特別的gtm.click事件，因爲按鈕被點擊的不是音頻元素本身，它保存了mp3的src路徑，並且按鈕沒有類或id，如上所示。這表示我需要將類或id用作GTM的標籤，因此Unique需要可識別（即歌名或mp3名稱等）。），因此，在查看報告時，我可以看到的不僅僅是點擊次數。謝謝 –

？

爲了做到這一點，你必須改變這個插件的簡碼，因此將允許把另一PARAM在短碼，例如：

[myplayer文件=「mymusic.mp3」 ID =」 1「]

然後在php文件中，您可以將新參數」id「放入生成的html中。

來源

2017-06-02 07:31:01 jacman

我只使用在https://codex.wordpress.org/Audio_Shortcode上找到的默認Wordpress音頻簡碼。我正在研究如何將src文件名添加爲id，而無需手動將其添加到每個樣本中 –

我正在研究這個問題，並提出了一個解決方案。它有點冒險，但確實符合我的需求。

它需要一個黑客以wpincludes/mediaelements/MediaElement的-和player.min.js（我計劃的創建一個插件在某個時候做到這一點...）

查找劇中的部分按鈕添加一個新的ID和類到按鈕。該ID由谷歌標籤管理器抓取，並且該類用帖子標題更新。

('<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>').

在每一個wordpress主題內容頁（content.php，內容的single.php，內容front.php等）

查找的音頻/視頻部分

<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>

我的情況是，我可以獲取Google標籤管理器中的element.css值，並使用它來跟蹤播放的音頻文件以及播放的頁面。

如果您需要跟蹤每個帖子的多個音頻文件，您可能會獲得媒體ID，並使用它來代替帖子標題 - GA中的tho，如果您有很多ID，則需要查找表。

來源

2017-11-17 18:36:08 RG1527

添加自定義ID到Wordpress音頻播放器播放按鈕？

回答

相關問題