AEM Angular 2 Client side Campaigns implementation

Avatar

Avatar
Validate 10
Level 3
tc82
Level 3

Likes

21 likes

Total Posts

64 posts

Correct reply

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

Avatar
Validate 10
Level 3
tc82
Level 3

Likes

21 likes

Total Posts

64 posts

Correct reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
tc82
Level 3

08-08-2017

Hello All,

Need help. We are trying to use aem and angular2 for one of our web apps.

Has anyone used the client side implementation of campaigns(leveraging the campaigns and offer)  in angular2?

We did the client side implementation using angular1. Where we used the cq/personalization/components/target.

But am not able to re-use it as it has the javascript which angular2 is not parsing.

Thank you for reading the post.

Accepted Solutions (0)

Answers (3)

Answers (3)

Avatar

Avatar
Boost 3
Level 2
rwinkle
Level 2

Likes

4 likes

Total Posts

11 posts

Correct reply

4 solutions
Top badges earned
Boost 3
Boost 1
Affirm 3
Affirm 1
View profile

Avatar
Boost 3
Level 2
rwinkle
Level 2

Likes

4 likes

Total Posts

11 posts

Correct reply

4 solutions
Top badges earned
Boost 3
Boost 1
Affirm 3
Affirm 1
View profile
rwinkle
Level 2

08-08-2017

Hi tc82,

I have experience with campaign integration and Angular 2/4 separately and may be able to help.  Could you further explain the issue you are seeing with Angular2?  What happens to make you think there is JavaScript Angular 2 isn't parsing?

The most common issues I've seen has to do with Angular detecting changes.  There are instances where I've had to force the change detection.  To learn more about how that works in Angular 2 here is a good reference. https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Avatar

Avatar
Boost 3
Level 2
rwinkle
Level 2

Likes

4 likes

Total Posts

11 posts

Correct reply

4 solutions
Top badges earned
Boost 3
Boost 1
Affirm 3
Affirm 1
View profile

Avatar
Boost 3
Level 2
rwinkle
Level 2

Likes

4 likes

Total Posts

11 posts

Correct reply

4 solutions
Top badges earned
Boost 3
Boost 1
Affirm 3
Affirm 1
View profile
rwinkle
Level 2

09-08-2017

Hi Tulasi,

One issue with that loadTeaser code is that it runs asynchronous. There is a race condition between when Angular renders and the content for the personalized experience loads.  In the past we've had to use a listener when the content is returned and then tell Angular to look for changes.

This is the listener:

ContextHub.eventing.on("segment-engine:teaser-loaded", function() {..}

You would put your code to force change detection inside function(){ }.  Here are some examples to force change detection in Angular2 angular - Triggering Angular2 change detection manually - Stack Overflow

Avatar

Avatar
Validate 10
Level 3
tc82
Level 3

Likes

21 likes

Total Posts

64 posts

Correct reply

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

Avatar
Validate 10
Level 3
tc82
Level 3

Likes

21 likes

Total Posts

64 posts

Correct reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
tc82
Level 3

09-08-2017

I have extended the out of the box target (/libs/cq/personalization/components/target/)component in my codebase( (/apps/cq/personalization/components/target/)).   I had to do some modifications for the engine_cq.jsp.

AM using the following syntax to load the target component on the angular2 page.

<div data-sly-resource="${ @path='heropar', resourceType='cq/personalization/components/target'}"

data-sly-unwrap></div>

But am not seeing any target component getting loaded on the page.

After some analysis what i found is the below line of code in engine_cq,jsp  is breaking the component.

<script type="text/javascript">

    $CQ(function() {

        CQ_Analytics.Engine.loadTeaser({ targetID: <%= JS.str(targetDivId) %>,<%

                                      %> teasers: <%= allTeasers %>,<%

                                      %> strategy: <%= JS.str(strategy) %>,<%

                                      %> trackingURL: <%= JS.str(trackingURLStr) %>});

    });

</script>

@rwinkle 

can you please let me know what steps have taken to implement the campaigns or banner.

If you can share the details it will be very helpful for me.

Thanks,

Tulasi.