{"id":19914739,"url":"https://github.com/fullstorydev/angular-shoppe-demo","last_synced_at":"2025-05-03T05:31:51.005Z","repository":{"id":38667630,"uuid":"241456761","full_name":"fullstorydev/angular-shoppe-demo","owner":"fullstorydev","description":"FullStory Angular demo","archived":false,"fork":false,"pushed_at":"2023-09-19T15:33:57.000Z","size":910,"stargazers_count":2,"open_issues_count":17,"forks_count":5,"subscribers_count":9,"default_branch":"master","last_synced_at":"2023-09-19T18:03:05.926Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fullstorydev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-18T20:08:41.000Z","updated_at":"2023-09-19T18:03:05.927Z","dependencies_parsed_at":"2023-02-06T12:01:43.630Z","dependency_job_id":null,"html_url":"https://github.com/fullstorydev/angular-shoppe-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstorydev%2Fangular-shoppe-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstorydev%2Fangular-shoppe-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstorydev%2Fangular-shoppe-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstorydev%2Fangular-shoppe-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullstorydev","download_url":"https://codeload.github.com/fullstorydev/angular-shoppe-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224354151,"owners_count":17297401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T21:36:55.071Z","updated_at":"2024-11-12T21:36:55.775Z","avatar_url":"https://github.com/fullstorydev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Shoppe Demo\n\nAngular Shoppe Demo is reference application that provides tips and tricks to using [FullStory](https://www.fullstory.com/) on [Angular](https://angular.io/) web applications.\n\n## Getting started\n\nYou'll need [Node.js](nodejs.org) to run or modify the application.  Once you have node installed, then download or clone this repo.\n\nInstall and start the web app with the following commands.\n\n```bash\ncd angular-shoppe-demo\nnpm install\nnpm run start\n```\n\nYou should see a *Compiled successfully* message.  Then open [http://localhost:4200](http://localhost:4200) in your browser.\n\n## Adding FullStory to the app\n\nIf 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](https://help.fullstory.com/hc/en-us/articles/360020828233#Install).\n\n## Using the app\n\nThe Shoppe is a super simple e-commerce application.  After starting the app:\n\n- Browse the products on either the [home page](http://localhost:4200) or the [/products](http://localhost:4200/products) route.\n- Use the **Add to Cart** button to add products to your shopping cart.\n- Review your cart and then click the **Continue to Checkout** button.\n- 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.\n\n## Using FullStory with the app\n\nNow that you've used the app, you have a session in FullStory. Head on over to FullStory [https://app.fullstory.com/login](https://app.fullstory.com/login).\n\nFind your session or build a segment using the following event filters.\n\n- `Clicked` `Text is exactly` **Add to Cart**\n- `Visited URL` `is` `PATH` /cart\n- `Visited URL` `is` `PATH` /checkout\n- `Changed` `CSS Selector` #firstname\n- `Visited URL` `is` `PATH` /thankyou\n\nCheck out a few sessions and explore the data to get a feel for how you'd use FullStory on your own app or site.\n\n## Tips and tricks\n\n- If you want to simulate different users, use a private or incognito window with the app.\n- Use the [FullStory Browser SDK](https://github.com/fullstorydev/fullstory-browser-sdk) to easily load FullStory into your app or site. See `app.component.ts`.\n- Add `fs-exclude` CSS classes to prevent recording of sensitive or personal information. See `checkout.component.html` and [Private by Default](https://help.fullstory.com/hc/en-us/articles/360044349073-FullStory-Private-by-Default).\n\n## (Optional) Use the product catalog microservice\n\nBy 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](https://help.fullstory.com/hc/en-us/articles/360020828393-How-do-I-enable-Ajax-Whitelisting-).\n\nTo enable the remote catalog:\n\n- Clone and start the [api-shoppe-demo](https://github.com/fullstorydev/api-shoppe-demo) app.\n- Update the `useMockApi` to be `false` in `environment.ts`.\n- Revisit the [home page](http://localhost:4200) or the [/products](http://localhost:4200/products) route.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstorydev%2Fangular-shoppe-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstorydev%2Fangular-shoppe-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstorydev%2Fangular-shoppe-demo/lists"}