Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

AEM Angular 2 Client side Campaigns implementation

Avatar

Level 4

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.

3 Replies

Avatar

Level 2

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

Level 4

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.

Avatar

Level 2

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