将自定义 ID 添加到 Wordpress 音频播放器播放按钮？答案

【问题标题】：Add custom ID to Wordpress Audio Player Play Button?将自定义 ID 添加到 Wordpress 音频播放器播放按钮？
【发布时间】：2017-06-01 16:18:32
【问题描述】：

我有一个页面，上面有几个玩家，并在 Google 跟踪代码管理器中设置了点击事件。也就是说，单击的播放按钮没有用于跟踪标记的类或 ID。我需要为每个玩家的播放按钮提供一个唯一的类或 ID，当点击它时会传递给 GTM。

基本上，当播放器在我的网站上显示时，它会显示为：

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

提前谢谢大家。

【问题讨论】：

标签： javascript jquery wordpress

【解决方案1】：

当然，播放不同音频的按钮有其独特之处，但您也许可以这样做：

（我不知道在标签管理器加载之前是否必须存在）

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>

【讨论】：

gtm.click 事件没有什么独特之处，因为单击的是按钮而不是保存 mp3 的 src 路径的音频元素本身，并且按钮没有如上所示的类或 id .这表示我需要将 class 或 id 用作 GTM 的标签，因此虽然 Unique 它需要是可识别的（即歌曲名称或 mp3 名称等），以便在查看报告时我可以看到的不仅仅是一个数字点击次数。谢谢

【解决方案2】：

你为那个音频播放器使用了什么插件？

为此，您必须更改此插件的简码，以便在简码中添加另一个参数，例如：

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

然后在php文件中，可以将新的参数“id”放到生成的html中。

【讨论】：

我只是使用在 codex.wordpress.org/Audio_Shortcode 找到的默认 Wordpress 音频短代码。我正在研究如何将 src 文件名添加为 id，而无需手动将其物理添加到每个样本中

【解决方案3】：

我正在研究这个问题并想出了一个解决方案。它有点 hacky，但它确实可以满足我的需求。

它需要破解 wpincludes/mediaelements/mediaelement-and-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、content-single.php、content-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 中，如果您有很多 ID，您将需要一个查找表。

【讨论】：

【解决方案4】：

我知道这是旧的，但如果其他人曾经像我一样搜索过这个，不要想太多或破解核心文件。您只需要配置一个与以下CSS选择器匹配的Click Element（或右键单击播放按钮进行检查，右键单击按钮标签，然后复制选择器）：

#mep_0 > div > div.mejs-controls > div.mejs-button.mejs-playpause-button.mejs-play > button

这是您的选择器，无需在按钮上专门设置 id 属性。

Screenshot of Trigger Configuration

请注意，同一页面上的每个其他玩家都会增加“mep ID”，例如 #mep_1、#mep_2 等。您设置了一个 Google Analytics：Universal Analytics 标记，其中包含您想要的事件、类别、操作和标签在触发时显示在分析中，并为每个按钮创建标签和触发器，以单独跟踪播放按钮的点击。您可以将标签命名为音频文件的文件名或任何您希望它在 GA 中显示的名称。使用 GTM Copy/Paste 扩展轻松复制。

Screenshot of Tag Configuration

我使用这种方法来跟踪在同一页面上可能有多个嵌入式播放器的播客播放。每个在 GA 中都带有自己的标签。此外，我让触发器检查页面路径或 URL，以便触发器仅触发并跟踪特定页面上播放按钮的播放点击。 GTM 一开始可能会让人望而生畏，但一旦您开始使用 Tag Assistant 并进行测试，它就会变得非常容易。

【讨论】：