https://github.com/fbsamples/insights_dashboard

Insights Dashboard is a sample app that integrates with Meta's Insights APIs
https://github.com/fbsamples/insights_dashboard

Last synced: 10 months ago
JSON representation

Insights Dashboard is a sample app that integrates with Meta's Insights APIs

• Host: GitHub
• URL: https://github.com/fbsamples/insights_dashboard
• Owner: fbsamples
• License: other
• Created: 2022-10-19T17:44:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-13T09:23:48.000Z (over 2 years ago)
• Last Synced: 2024-04-09T22:10:10.142Z (almost 2 years ago)
• Language: JavaScript
• Homepage:
• Size: 1.88 MB
• Stars: 8
• Watchers: 8
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          






  

    

  


Meta Insights API Dashboard


  


    A sample dashboard to jumpstart your Meta Insights API projects!

    


    


    


    Report Bug

    ·

    Request Feature

  



  Table of Contents

  


    


      About The Project

    

    


      Getting Started

      


        
Prerequisites

        
Installation

      

    

    
Usage

    
Contributing

    
License

  


## About The Project

This project showcases sample API usage for multiple Meta Insights API products, in a friendly easy-to-use dashboard.

* For your reference the documentation of Meta Insights APIs used in this project are:

    - [Ads Insights API](https://developers.facebook.com/docs/marketing-api/insights/)

    - [Whatsapp Template Analytics API](https://developers.facebook.com/docs/whatsapp/business-management-api/analytics/)

    - [Page Insights API](https://developers.facebook.com/docs/platforminsights/page)

    - [Video Insights API](https://developers.facebook.com/docs/video-api/guides/insights/)

    - [Instagram Insights API](https://developers.facebook.com/docs/instagram-api/guides/insights)

(back to top)


## Getting Started

* In order to run the Insights Dashboard app, you will need to update the configuration file by adding the:

    - [Ad Account ID and User Access Token](https://developers.facebook.com/docs/facebook-login/guides/access-tokens/)

    - [Facebook Page ID and Access Token](https://developers.facebook.com/docs/pages/access-tokens)

    - [Instagram User ID and Access Token](https://developers.facebook.com/docs/instagram-api/getting-started)

### Prerequisites

* If running locally:

    * [nodeJS](https://nodejs.org/en/download/), which you can install via Homebrew (MacOS only)  - `brew install node`

    * [yarn](https://classic.yarnpkg.com/lang/en/docs/install), which you can install via Homebrew (MacOS only) - `brew install yarn`

* If running in dev container:

    * [Docker](https://www.docker.com/) or another environment that supports dev containers e.g. [GitHub Codespaces](https://github.com/features/codespaces).

* You will need to have a Facebook Page / Ad account and an App created in Meta Developers. If you don’t have an app, follow the guide [here](https://developers.facebook.com/docs/development/) to create your app first.

### Installation

1. Run `npm install` or `yarn install`

    Installs project dependencies.

    Open the terminal and run `npm install` or `yarn install`.

2. Set up `.env.local` file

    Copy the file `.sample.env.local` to `.env.local`

    ```

    cp .sample.env.local .env.local

    ```

    Edit the `.env.local` file to add all the values for your project including your Meta information related to Pages, Instagram and Ad Account to fetch the Insights data.

## Usage

1. Run `npm run dev` or `yarn dev`

   Runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

    The page will reload when you make changes. You may also see any errors in the console.

2. Run `npm run build` or `yarn build`

    Builds the app for production to the `build` folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

3. Run `npm run cypress` or `yarn cypress`

    Launches the test runner with Cypress in the interactive watch mode.

(back to top)


## Contributing

Contributions are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star! Thanks again!

1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

(back to top)


## License

Distributed under the Meta Platform Policy. See `LICENSE` file for more information.

(back to top)