Skip to content
FullStory Angular demo
TypeScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

Angular Shoppe Demo

Angular Shoppe Demo is reference application that provides tips and tricks to using FullStory on Angular web applications.

Getting started

You'll need Node.js to run or modify the application. Once you have node installed, then download or clone this repo.

Install and start the web app with the following commands.

cd angular-shoppe-demo
npm install
npm run start

You should see a Compiled successfully message. Then open http://localhost:4200 in your browser.

Adding FullStory to the app

If you have signed up for FullStory, add your orgId to the src/environments/environment.ts file. Your orgId can be found on the Settings page. It'll be next to the window['_fs_org'] variable in the snippet. For more information, see Install your recording snippet.

Using the app

The Shoppe is a super simple e-commerce application. After starting the app:

  • Browse the products on either the home page or the /products route.
  • Use the Add to Cart button to add products to your shopping cart.
  • Review your cart and then click the Continue to Checkout button.
  • Fill out the form on the following page and click Checkout. The app won't record sensitive or personal information, but it will record your first and last name as well as your email address. Feel free to use some bogus info.

Using FullStory with the app

Now that you've used the app, you have a session in FullStory. Head on over to FullStory

Find your session or build a segment using the following event filters.

  • Clicked Text is exactly Add to Cart
  • Visited URL is PATH /cart
  • Visited URL is PATH /checkout
  • Changed CSS Selector #firstname
  • Visited URL is PATH /thankyou

Check out a few sessions and explore the data to get a feel for how you'd use FullStory on your own app or site.

Tips and tricks

  • If you want to simulate different users, use a private or incognito window with the app.
  • Use the FullStory Browser SDK to easily load FullStory into your app or site. See app.component.ts.
  • Add fs-exclude CSS classes to prevent recording of sensitive or personal information. See checkout.component.html and Private by Default.

(Optional) Use the product catalog microservice

By default all products are served from the Angular Shoppe itself. You can optionally enable the products microservice, which will return the product catalog as an AJAX service call. This allows you to record API requests and responses, see the article How do I enable Ajax Whitelisting.

To enable the remote catalog:

You can’t perform that action at this time.