Expand my Community achievements bar.

Target Implementation using AT.js for Single Page Apps

Avatar

Level 3

Hello All,

I could use some advice from you to resolve the inconsistency in “Target Implementation using AT.js” on my single page application.

I am using “adobe.target.ext.lib.js v0.2.1” configured using DTM.

The implementation is done using Page Load Rule which fires at the start to set Target.

My Problem is that the offer works fine almost always for the 1st time on the required pages. But if I revisit the page, offer does not appear even when I can see the offer in ttMeta.

When I go back to previous page, refresh the page and revisit the page, then it appears to work.

My Activities are based on Audiences from Custom Attribute, Data Layer Values and Analytics Segments spread across various pages.

Here is the application link:

https://purchase-stest.allstate.com/onlinesalesweb/app/auto/

If need more information, please advise.

Regards

7 Replies

Avatar

Level 10

Hi Sameer,

Can you please provide your DTM account as well as Target Account login credentials and client code in a private message so that we can debug the same at our end.

Thanks & Regards

Parit Mittal

Avatar

Level 10

Hi Sameer,

Is the above issue resolved ?

Thanks & Regards

Parit Mittal

Avatar

Level 3

Hi

Vadym Ustymenko identified following:

1. The reason why we were not getting Target content injected successfully at all times (even though it was delivered in the response) was because the action selector was slightly delayed to appear on page, thus it was missing during moment when at.js was trying to append the content. In general, at.js is designed to poll for element if it is missing so this should be handled, however, DOM polling is occurring only after page load. In our case we have a SPA and at.js is not polling on view changes (events). 

2. We can not use updated at.js extension as it requires angular version 1.4 (I have 1.3). So We can not determine right now if above issue will get resolved with updated at.js extension available in GitHub.

3. Vadym addressed this issue with newest at.js extension, which is not in GitHub right now. He hopes that it will be the recommended solution for all SPAs because it does not rely on any framework. It is built on MutationObserver event and this allows us to know the very moment when DOM makes changes. Target calls are fired only on DOM changes per URL. This is very reliable because we know when to trigger Target calls and we are in control of flicker. We have several clients using this code successfully (with Angular) and I tested multiple times on your website – it worked every single time from my end. 

This seems to be working for me. I am doing more testing.

Regards

Avatar

Level 4

Hello all,

Were you able to conclude that the changes made, particularly by using MutationObserver, if this is a viable solution?

If so, would you be willing to share parts of your code -- basically the MutationObserver? We doing something similar, I imagine. Below is a striped-down sample of how we're using MutationObserver in an Angular SPA:

    taoNumOfEX = 0;

    var observer = new MutationObserver(function(mutations) {

        // Move all EX properties to top of hotel list

        if("selector").length > taoNumOfEX {

            console.log('There are more of these than those.');

        }

    });

    var observerConfig = {

        attributes: true,

        childList: true,

        characterData: true

    };

    var taoTargetNode = document.body;

    observer.observe(taoTargetNode, observerConfig);

Avatar

Administrator

Hi Sameer Khaladkar! Any chance you can weigh in on Brion's follow up question?