Question

当用户收听或下载我的歌曲并为Goole Analytics生成活动时，我试图抓住JQuery。

与＆lt;音频＆gt;它工作正常，但用户下载歌曲时会遇到一些麻烦。

代码是：

$("audio").bind("play", function( event ){
    ga('send', 'event', 'Audio', 'Play', event.target.id );
});
$("audio").bind("ended", function( event ){
    ga('send', 'event', 'Audio', 'Ended', event.target.id );
});
$("a:contains('Download')").click(function( event ){
    ga('send', 'event', 'Audio', 'Download', event.target.id );
});

所有播放和结束的活动都会被捕获，直到用户第一次点击＆＃34;下载＆＃34;链接。第一个下载事件被正确触发但从现在起不再检测到任何事件，无论是播放还是结束。我也尝试过：

$( document ).on("click" , "a:contains('Download')" , function( event ){
    ga('send', 'event', 'Audio', 'Download', event.target.id );
});

有类似的结果。

Answer 1

我找到了一个可能的解决方案。

最初的问题是我想向访问者提供一个按钮来下载我的歌曲，这会打开一个“另存为”消息框。我的原始代码是使用HTML download 属性：

<a href="/mp3/Mysong.mp3" downlaod >Download</a>

这个解决方案有几个问题：

并非所有浏览器都支持
当出现消息框时，jQuery似乎停止收听页面中的事件，因此我不再（通过Google Analytics）跟踪用户播放歌曲的次数。

我的解决方案如下：

HTML ：定义与下载事件关联的类（ TrackDownload ）

<a class="TrackDownload" href="/mp3/Mysong.mp3">Download</a>

JS ：与类 TrackDownload 关联新框架的开启，这样一种方式jQuery继续监控主页面，同时将歌曲下载到另一个页面< / p>

$( document ).ready(function() {
    $("a.TrackDownload").click(function( event ){
        ga('send', 'event', 'Audio', 'Download', event.target.id );
    });
    $("a.TrackDownload").attr({target: '_blank',
        download: $(this).prop('href'),
        href : $(this).prop('href')
    });
    $("audio").bind("play", function( event ){
        ga('send', 'event', 'Audio', 'Play', event.target.id );
    });
});

.htaccess ：在服务器级别，定义mp3文件不必播放但已下载的事实。这样一种方式新框架不会打开，而是在“另存为”消息框中转换。

<FilesMatch "\.mp3$">
<IfModule mod_headers.c>
Header set Content-Disposition "attachment"
Header set Content-Type "application/octet-stream"
</IfModule>
</FilesMatch>

也许有更优雅的解决方案，但这个有效。

下载后点击jquery触发器

1 个答案: