Target Implementation using AT.js for Single Page Apps

Avatar

Avatar
Validate 10
Level 2
Sameer_Khaladka
Level 2

Likes

2 likes

Total Posts

38 posts

Correct reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
Affirm 5
Affirm 3
View profile

Avatar
Validate 10
Level 2
Sameer_Khaladka
Level 2

Likes

2 likes

Total Posts

38 posts

Correct reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
Affirm 5
Affirm 3
View profile
Sameer_Khaladka
Level 2

05-01-2017

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

Replies

Avatar

Avatar
Validate 10
Level 2
Sameer_Khaladka
Level 2

Likes

2 likes

Total Posts

38 posts

Correct reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
Affirm 5
Affirm 3
View profile

Avatar
Validate 10
Level 2
Sameer_Khaladka
Level 2

Likes

2 likes

Total Posts

38 posts

Correct reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
Affirm 5
Affirm 3
View profile
Sameer_Khaladka
Level 2

05-01-2017

Avatar

Avatar
Validate 10
Level 10
ParitMittal
Level 10

Likes

93 likes

Total Posts

817 posts

Correct reply

349 solutions
Top badges earned
Validate 10
Validate 1
Boost 50
Boost 5
Boost 3
View profile

Avatar
Validate 10
Level 10
ParitMittal
Level 10

Likes

93 likes

Total Posts

817 posts

Correct reply

349 solutions
Top badges earned
Validate 10
Validate 1
Boost 50
Boost 5
Boost 3
View profile
ParitMittal
Level 10

06-01-2017

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

Avatar
Validate 10
Level 2
Sameer_Khaladka
Level 2

Likes

2 likes

Total Posts

38 posts

Correct reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
Affirm 5
Affirm 3
View profile

Avatar
Validate 10
Level 2
Sameer_Khaladka
Level 2

Likes

2 likes

Total Posts

38 posts

Correct reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
Affirm 5
Affirm 3
View profile
Sameer_Khaladka
Level 2

06-01-2017

I sent you personal e-mail.

Let's connect.

Regards

Avatar

Avatar
Validate 10
Level 10
ParitMittal
Level 10

Likes

93 likes

Total Posts

817 posts

Correct reply

349 solutions
Top badges earned
Validate 10
Validate 1
Boost 50
Boost 5
Boost 3
View profile

Avatar
Validate 10
Level 10
ParitMittal
Level 10

Likes

93 likes

Total Posts

817 posts

Correct reply

349 solutions
Top badges earned
Validate 10
Validate 1
Boost 50
Boost 5
Boost 3
View profile
ParitMittal
Level 10

15-01-2017

Hi Sameer,

Is the above issue resolved ?

Thanks & Regards

Parit Mittal

Avatar

Avatar
Validate 10
Level 2
Sameer_Khaladka
Level 2

Likes

2 likes

Total Posts

38 posts

Correct reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
Affirm 5
Affirm 3
View profile

Avatar
Validate 10
Level 2
Sameer_Khaladka
Level 2

Likes

2 likes

Total Posts

38 posts

Correct reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 1
Affirm 5
Affirm 3
View profile
Sameer_Khaladka
Level 2

16-01-2017

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

Avatar
Validate 10
Level 4
bkmills1
Level 4

Likes

43 likes

Total Posts

54 posts

Correct reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 25
View profile

Avatar
Validate 10
Level 4
bkmills1
Level 4

Likes

43 likes

Total Posts

54 posts

Correct reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 25
View profile
bkmills1
Level 4

30-10-2017

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

Avatar
Validate 250
Employee
Amelia_Waliany
Employee

Likes

191 likes

Total Posts

452 posts

Correct reply

73 solutions
Top badges earned
Validate 250
Validate 100
Validate 50
Validate 25
Validate 10
View profile

Avatar
Validate 250
Employee
Amelia_Waliany
Employee

Likes

191 likes

Total Posts

452 posts

Correct reply

73 solutions
Top badges earned
Validate 250
Validate 100
Validate 50
Validate 25
Validate 10
View profile
Amelia_Waliany
Employee

06-11-2017

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