adobe-marketing-cloud / target-atjs-extensions

Adobe Target extensions to at.js to support Single Page Application implementations

target-atjs-extensions

Adobe Target extensions to at.js -- the new library for Adobe Target. At the moment these are mostly for supporting Target in Single Page Application environments.

• Wiki: detailed information about at.js extensions, their implementations, examples and references to demo pages.
• Demos: demo page with links to various at.js implementations for regular websites as well as Single Page Application sites.
• Issues: place send feedback and questions through Github issues. We will respond as best we can. Please note, these extensions are not supported by Adobe Client Care or Target Engineering.

These extensions are provided free to developers as a starting point to integrate at.js with their Single Page Application. Extensions are not always updated for the latest at.js version. Customization may be required to integrate successfully with your single page app.

This repository is a work-in-progress. Please check commits for version history. These extensions are only to be used with an at.js deployment of the Adobe Target solution.

target-atjs-extensions's Issues

How to integrate with at.js 2x for multiple offer

Hi team,
The ask is to save calls to target origin specifically on page load when we have multiple mboxes placeholder rendered from react SSR.
After research, I get to know that getOffer to be changed to use getOffers() as per https://docs.adobe.com/content/help/en/target/using/implement-target/client-side/upgrading-from-atjs-1x-to-atjs-20.html

Please let me know if you have some way to address it.

Cheers!!

Are Licensing Comments Required (and if so, multiple times)?

There are somewhat large licensing comments in the file that are repeated once for each variable.

1. Do we need to keep them upon deployment?
2. If so, can we make one reference with all the code after?

Thanks,
Lester

Remote Offers not working with later versions of AT.js (>0.94)

Hi there,

The remote offers plugin does not work properly with newer versions of AT.js - Offers are not getting deployed on the page.

I tracked down the issue to the structure of the JSON offer created by the extension. I was able to fix it locally by changing the applyOffers call as follows:

I am not clear on the gulp build process and so I did not create a pull request - Please let me know if you need more information.

at.js Remote Offer Code

Team -

What code is needed to utilize Remote Offers w/ at.js v0.9.6.

Assumption:

• Remote offer plugin is added to the bottom of at.js
• Add polyfill code

Code Snippets:
/* adobe.target.xt.getRemoteOffersPlugin */ is added to the bottom of the at.js library.

• Do you have a link to the plugin code snippet?

Is this polyfill code still needed w/ at.js v0.9.6, since it has it's own polyfill?

It would be great to have a wiki with links to code snippets to enable this functionality. The documentation lacks clarity of which code is needed to enable the Remote Offers feature. Also, does implementation vary across at.js versions?

Thanks,
Kollin

React component uses deprecated lifecycle methods

target-atjs-extensions/react/component/src/component.jsx

Lines 24 to 26 in f689187

	componentWillReceiveProps(newProps) {
	return onComponentWillReceiveProps(this, this.logger, newProps);
	}

As per the React documentation, componentWillReceiveProps is a deprecated method, slated for removal in v17.

One possible solution would be to change the implementation of shouldComponentUpdate and then leverage componentDidUpdate (I am aware of #37 which may or may not make this possible).

Otherwise another option may be to trigger these side effects in the shouldComponentUpdate call, which seems like an anti pattern but is the first and only method that would be called if the implementation stays as returning false.

Target Components children will not update. Shouldn't the users handle the `shouldComponentUpdate()` logic and not the Target Component?

Correct me if Im misunderstanding something but this plugin shouldn't be worried about shouldComponentUpdate() returning false in line 37 of the component for it's children. This just prevents it's child nodes line 15 of the component from rerender and has no bearing on the Parent <Target> node itself right?

Take the following:

<App>
       <div>
              <MyBody>
                        <Target>
                                <UsersWrappedContent>
                                                <MoreUserChangingContent/>
                                </UsersWrappedContent>
                        </Target>
              </MyBody>
       </div> 
</App>

According to the react docs React will replace the first node that it detects change.

React will tear down the old tree and build the new tree from scratch.

When tearing down a tree, old DOM nodes are destroyed.

<App>           <----So it will check the root node.  Has it been updated? No. Next!
       <div>           <---- Has it been updated? No. Next!
              <MyBody>           <---- This one? No. Next!
                        <Target>            <---- This one? Yes. so just replace it's children while maintaining state across render
                                <UsersWrappedContent>
                                                <MoreUserChangingContent/>
                                </UsersWrappedContent>
                        </Target>
              </MyBody>
       </div> 
</App>

Further:

When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element
Any components below the root will also get unmounted and have their state destroyed.

So if the component is maintained across renders is there anything i'm missing as to why you're setting shouldComponentUpdate() like that?

(I also made this example pen to illustrate what shouldComponentUpdate() is doing if it helps)

Question : React Server Side Rendering

Do we have any plans to share an API for React Server Side Rendering. Ex - Node can communicate to target/atjs before render to string.

Angular2 documentation

Are Angular2 docs and examples planned? Just wanted to ask the question.

I'm needing to implement at on an Angular2 page, and my team would be happy to share how we achieved it once complete.

Previous mboxURL upon state change

I am using https://github.com/Adobe-Marketing-Cloud/target-atjs-extensions/tree/master/angular/ui-router.

Upon state change, when I see mbox calls from AT.js, mboxURL is of the current page and not of the URL that is used after the state change as shown in the pics below. This is preventing the correct offers to be executed when offers are based on the current page URL.

In this case, I am trying to change the text of the button on the “forgot password” page however since the mboxURL being passed is from the previous state/page, offer does not get executed.

You can see the offer in action on this URL:
https://wudispatcher-uatrs4.westernunion.com/us/en/send-money/app/forgot-password?test=25&src=test-25

Button text changes based on the AT.js offer but when you click on login and then “forgot password” you come back to the same page without page loading again but now mboxURL is “/login” instead of “/forgot-password”. See the pic below.

React component includes babel helpers

Please consider adding a build that has the babel-runtime as a dependency and exclude it from your webpack build. This way babel helper functions are not duplicated by projects that also build ES6 packages.

deferred.resolve for empty offers should pass no object

deferred.resolve({error: 'Empty offer'}); is breaking SPA - no partials rendered. However, deferred.resolve(); works well. Please fix.

Target w/AngularJS - implemented but not "flicker free"

I have implemented up to date version of at.js on our site following instructions here for ngRoute. The implementation is working, I can load my page in the VEC and set up activities.

My issue is that when I run an activity, specifically an A/B test with URL Redirect, ALL of experience A loads before the target code runs and redirects the user to experience B.

I have attempted to move the target specific files up into the head however this causes errors in the application as it's kicking in before Angular is defined. Angular is, by default, loaded at the bottom of the page.

How can I implement so that the URL redirect kicks in before the page has loaded up? GIF attached showing current behaviour....

Thanks!

edit: I am using AngularJS v1.6.6

Out of date scripts.

Please update the at.js and visitor api.js script files, or provide links to where the latest versions of these files can be downloaded.

AT.js provided in this repository is version 2.2.0 (Oct 2019), and the current version is 2.3.2 (July 2020).

VisitorAPI.js provided in this repository is version 4.0 (Feb 2019), and the current version is 5.0.1 (July 2020).

Angular2 Directive - Extension not working for Angular2

Angular 2 Directive is Precompiled

The npm package dist for Angular 2 is precompiled. You can't install this package as is and use it.

UI-Router Extension Not Working

We are seeing issues with the ui-router extension. It breaks on the following line for each state in the ui-router extension#initializeModule method:

var offerData = $state.$current.locals.globals.offerData;

With the following error:

With the following dependencies:

"dependencies": {
    "@uirouter/angularjs": "^1.0.5",
    "angular": "^1.6.2",
    "bootstrap": "^4.0.0-alpha.6",
    "lodash": "^4.17.4"
  },

I am assuming this is a version incompatibility, but don't know enough to offer a solution.

Unable to build with Angular-CLI in prod mode

Cloning https://github.com/Adobe-Marketing-Cloud/target-atjs-extensions/tree/master/demos/examples/angular2/directive and running an ng build --prod results in:

ERROR in <WORKSPACE>/target-atjs-extensions/demos/examples/angular2/directive/src/$$_gendir/app/app.component.ngfactory.ts (11,21): Cannot find module 'target-ng-module'.

ERROR in <WORKSPACE>/target-atjs-extensions/demos/examples/angular2/directive/src/$$_gendir/node_modules/@adobe/target-ng-module/target-ng-module.ngfactory.ts (10,21): Cannot find module 'target-ng-module'.

ERROR in <WORKSPACE>/target-atjs-extensions/demos/examples/angular2/directive/src/$$_gendir/app/app.module.ngfactory.ts (15,21): Cannot find module 'target-ng-module'.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '<WORKSPACE>/target-atjs-extensions/demos/examples/angular2/directive/src'
 @ ./src/main.ts 3:0-74
 @ multi ./src/main.ts

Questions with configuration

Hi,

Can you please explain or direct me to a document that explains how to do the item below?

Integration Instructions:

Use at.js without the auto-created mbox