ajax 网站上的 criteo 标签答案

【问题标题】：criteo tags on ajax siteajax 网站上的 criteo 标签
【发布时间】：2018-02-20 14:09:19
【问题描述】：

我在将 criteo 标签集成到我的 ajax 网站时遇到问题。当我发送我的第一个事件时，一切正常。

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(event_data);
</script>

但是当我尝试在不重新加载页面的情况下将另一个事件发送到 criteo 时，它不起作用。事件未出现在 Criteo 中。

<script>
window.criteo_q.push(event_data);
</script>

有什么想法吗？

演示示例：https://jsfiddle.net/36jq9dLu/156/

【问题讨论】：

标签： javascript turbolinks criteo

【解决方案1】：

您应该在每次要触发新事件时以编程方式重新导入加载程序。这不会导致任何延迟，因为加载器会被浏览器缓存，但这是必要的，因为它包含一些对重新初始化 criteo_q 对象有用的代码。您可以在每个事件触发之前添加以下行：

window.criteo_q = undefined;
script = document.createElement('script');
script.src = '//static.criteo.net/js/ld/ld.js';
script.async = 'true'
document.head.appendChild(script);
window.criteo_q = window.criteo_q || [];

https://jsfiddle.net/36jq9dLu/199/

【讨论】：

谢谢。但它必须是window.criteo_q = []; 或window.criteo_q = undefined; 而不是window.criteo_q = window.criteo_q || [];，因为//static.criteo.net/js/ld/ld.js 中的第一行criteo 对象不会被重新初始化if (!window.criteo_q || window.criteo_q instanceof Array) {
我也做了一些调试，找到了更好的解决方案。 Criteo 通过将iframe 和script 标签添加到div id="criteo-tags-div" 来发送其事件。 Criteo 脚本将此 div 缓存到一个变量中，并且在页面更改时不会重置此变量（在我的情况下，整个 document.body 在页面更改时被替换）。因此，在页面更改之前，我将 #criteo-tags-div 分离并在页面更改后将其附加到 document.body 中。
我不确定您的解决方案，因为部分事件也在调用中作为查询参数发送，所以我总是设置window.criteo_q = undefined;以确保删除所有以前的数据。 window.criteo_q = window.criteo_q || []; 有助于确保浏览器找到有效的 criteo_q 对象，因为加载程序注入是异步的。

【解决方案2】：

为了让 Criteo OneTag 在 DOM 更改后正确评估事件，您应该使用 requiresDOM 参数将小部件设置为非阻塞模式。

...
  events = [
  { event: 'setAccount', account: 123456 },
  { event: 'setHashedEmail', email: '1234567890asdf' },
  { event: 'setSiteType', type: 'd' },
  { event: 'viewHome' },
  { requiresDOM: "non-blocking", cb:
    $(document.body).on("page:changed", function() {
       product_event =
[
        { event: 'setAccount', account: 123456 },
        { event: 'setHashedEmail', email: '1234567890asdf' },
        { event: 'setSiteType', type: 'd' },       
        { event: "viewItem", product: 123 }    

]
        criteo_q.push(product_event)    
    })    
  }

]

window.criteo_q.push(events);
...

以下 sn-p 演示了这一点：

https://jsfiddle.net/yuxqrfev/5/

【讨论】：