criteo tags on ajax site

Question

I have an issue with integrating criteo tags into my ajax website. Everything works perfectly when I send my first event.

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

But when I try to send another event into criteo without page reload it does not work. Event does not appear in criteo.

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

Any ideas what is wrong?

Demo example: of https://jsfiddle.net/36jq9dLu/156/

Answer 1

You should programmatically reimport the loader every time you want to fire a new event. This won't cause any latency as the loader is cached by the browser, but is necessary as it contains some code useful to reinitialize the criteo_q object. You can add the following lines before every event fire:

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/

Answer 2

In order for Criteo OneTag to properly evaluate events after DOM-change you should set widget to non-blocking mode by using requiresDOM parameter.

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

Following snippet demonstrates this:

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