添加自定义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音频播放器播放按钮？

回答

相关问题