【发布时间】：2017-10-11 14:21:34
【问题描述】：
我有一个使用Mozilla PDF.js 的带有 iFramed pdf 的网站，如下所示：
<iframe class="maxit" src="web/viewer.html?file=MaxIT.pdf#zoom=page-fit" frameborder="0">
<embed class="maxit" src="web/viewer.html?file=MaxIT.pdf" type="">
</iframe>
我正在使用来自 google 的 analytics.js 来跟踪页面，如下所示：
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-XXXXXX-XX', 'auto');
ga('send', 'pageview');
</script>
一切都按预期工作，甚至是页面上的标准事件跟踪。 我的问题是，单击 pdf 中的链接时，我无法让它跟踪事件。例如，我在 pdf 中有几个 og mailto 链接，我想跟踪它们。我正在使用以下脚本将事件发送到 GA，但没有任何反应，即使我将脚本和 analytics.js 直接放在 web/viewer.html 页面上。这是我正在使用的脚本：
<script type="text/javascript">
$("a").each(function() {
var href = $(this).attr("href");
var target = $(this).attr("target");
var text = $(this).text();
$(this).click(function(event) { // when someone clicks these links
event.preventDefault(); // don't open the link yet
if (href.indexOf("mailto") !== -1) {
ga('send', 'event', {
'eventCategory': "mailto link",
'eventAction': "clicked",
'eventLabel': href,
'transport': 'beacon'
}); // create a custom event
console.log("mailto clicked");
}
setTimeout(function() { // now wait 300 milliseconds...
window.parent.open(href, (!target ? "_self" : target)); // ...and open the link as usual
}, 300);
});
});
</script>
上面的脚本工作正常，只是不适用于 pdf 中的链接。
【问题讨论】：
-
请注意，PDF.js 会动态创建链接，因此您需要在每次呈现页面并创建注释层时运行脚本。或者不要使用 jQuery 并通过单个 document.addEventListener('click', handler, true); 监听点击事件；
-
当然，这行得通。谢谢你的回答。
标签： jquery pdf google-analytics