将自定义ID添加到Wordpress音频播放器的“播放"按钮? [英] Add custom ID to Wordpress Audio Player Play Button?

问题描述

我有一个页面，上面有多个播放器，并且在Google跟踪代码管理器中设置了点击事件.也就是说，所单击的播放按钮没有用于跟踪的类或ID来为其加上标签.我需要给每个玩家播放按钮一个唯一的类或ID，单击该类或ID即可将其传递给GTM.

I have a page with several players on it and a click event setup in Google Tag Manager. That said the play button that is clicked has no class or id for the tracking to label it with. I need to give each players play button a unique class or ID that when clicked has something to pass to GTM.

基本上，当播放器显示在我的网站上时，它的出现是:

Basically when the player shows on my site it comes in as:

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

谢谢大家.

推荐答案

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

I was researching this very issue and came up with a solution. Its a bit hacky but it does work for my needs.

它需要破解wpincludes/mediaelements/mediaelement-and-player.min.js(我计划创建一个插件来在某个时候做到这一点...)

it requires a hack to wpincludes/mediaelements/mediaelement-and-player.min.js (I plan an creating a plugin to to do this at some point...)

找到播放"按钮的部分，向按钮添加新的ID和类.该ID由Google跟踪代码管理器抓取，并使用帖子标题更新该类.

Find the section for the play button add a new id and class to the button. The id is grabbed by google tag manager and the class is updated with the post title.

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

In each wordpress theme content page (content.php, content-single.php, content-front.php, etc)

找到音频/视频部分

<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值，并使用该值来跟踪播放了哪个音频文件以及在哪个页面上播放了该音频文件.

in my case I was then able to get the element.css value in Google tag manager and use that to track what audio file was played and on which page it was played on.

如果每个帖子需要跟踪多个音频文件，则可以获取媒体ID并使用它代替帖子标题-在GA中，如果您有很多ID，则需要一个查找表.

If you need to track more than one audio file per post you could probably get the media id and use that instead of the post title - tho in GA you would need a lookup table if you have a lot of IDs.

这篇关于将自定义ID添加到Wordpress音频播放器的“播放"按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！