Question

我有一个页面上有几个播放器，并在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>

提前谢谢大家。

Answer 1

当然，播放不同音频的按钮有一些独特之处，但你可能会做这样的事情：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

为了做到这一点，你必须改变这个插件的短代码，这样就可以在短代码中添加另一个参数，例如：

[myplayer file =＆＃34; mymusic.mp3＆＃34; ID =＆＃34; 1＆＃34;]

然后在php文件中，你可以把新的param＆＃34; id＆＃34;在生成的html中。

Answer 3

我正在研究这个问题，并想出了一个解决方案。它有点hacky但它确实适合我的需要。

它需要一个hack来wpincludes / mediaelements / mediaelement-and-player.min.js（我计划在某个时候创建一个插件来执行此操作......）

找到播放按钮的部分，为按钮添加新的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并使用它而不是帖子标题 - 如果你有很多ID，你需要一个查找表。

Answer 4

我意识到这很老了，但是如果有人像我一样搜索此文件，请不要过分考虑或破解核心文件。您只需要配置与以下CSS选择器匹配的Click元素（或右键单击播放按钮进行检查，右键单击button标签，然后复制选择器）：

#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复制/粘贴扩展程序可以轻松复制。

Screenshot of Tag Configuration

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

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

4 个答案: