End-to-end example of SPA based on Angular 2+

[BobaGrand-qu5vz]

Can anyone provide a reference to a complete example of instrumenting a single-page application (SPA) built with Angular 2 or higher (TypeScript) with Adobe Analytics components and Launch? By complete example I mean implementation of the following:

1. Injection of JS on initial page load, hopefully the least invasive method (using routing modules, injected services, directives, etc.)
2. Implementation of direct rules and user action events (pressing buttons, selecting links, downloading files)
3. Sample data layer with updates to values upon partial view rendering
4. Sample rules and data element definition in Launch
5. Full sample configuration of Launch that covers page load and user action events
6. Step-by-step description of the entire instrumentation process in the correct order

Adobe documentation includes an article on AngularJS, which is not the version of Angular I am looking for. This article does not provide the full picture of instrumentation either. I am looking for a practical and usable documentation for Angular 2+ that includes all aspects of implementation.

Thank you.

[gflare · Accepted solution]

This link may help you get started, it's the Reference Architecture documents for Adobe Launch.  It's worth bookmarking, covers the initial items for Launch, Analytics, and Target usually - been awhile since I reviewed them though.

Link: Launch by Adobe Reference Architectures

There's a basic example with Angular listed on there, here are the direct links:

PDF (direct link):  https://helpx.adobe.com/content/dam/help/en/experience-manager/kt/integration/using/launch-referenc...

Reference Site Example (demo site): Angular Starter for Adobe Target Demo

Hopefully this helps,

[jantzen_b]

Marking as correct since this is the most applicable answer to the general public. I've replied to the original poster with the information relevant to his specific use case.

[BobaGrand-qu5vz]

I appreciate your quick response but I am asking for something different:

1. I asked for complete end-to-end example and not reference architecture guide, which I am familiar with.

2. I am also quite familiar with the attached PDF but it covers AngularJS and not Angular 2+

3. The demo site is too basic to be considered a guide. It doesn't cover custom events and even view-end event is not described to an acceptable level of detail.

4. I am talking about an example describing best development practices, and not just rudimentary basics.

Thank you.

[jantzen_b]

I've verified with our technical marketing team that the links above are the closest we have to what you are requesting. With that said, they are always working on new guides and they've received your feedback. We aren't able to cover every use case in extreme detail but if you have specific questions feel free to ask them on the community and we'll do our best to help.