Instamission was a photo contest profile on Instagram made by Contente.vc. During some years, they ran hundreds of missions grouping photos by hashtags, many of which were sponsored by famous brands. So they hired me to create a system to retrieve metrics from the Instagram API for each mission and display them in a nice and intuitive dashboard with many different views. All the data was used to help them manage the contests and also to show the sponsors the return on their investments.
I had already a lot of experience with the Instagram REST API since 2012, when I developed Printgr.am, a photo print system by hashtag. So the biggest challenge was to understand how they would need the data and ensure their questions would be answered.
First, I created a clickable mockup using this amazing tool https://moqups.com/ and we iterated through it for some days until it was totally adjusted to their needs. The screenshot below is the mockup of the client page and you can check the whole mockup on this link (in Portuguese). Once it was finished, I started coding following their priorities, that way they could start using the system before it was completely done.
I’ve implemented the system in vanilla PHP using the slim MVC framework MOJ that I had created a year before. The MVC structure made it easy to create a class that connected to the Instagram API to use in different controllers having some different views to display the charts, that were created using Google Charts. For each mission, it was possible to check important metrics like:
-
- Total published photos and total participants
- Average published photos per user (a user could publish more than one photo on the same mission)
- Total reach – how many Instagram users were impacted by the mission considering the publishers, their followers, and interactions on each photo
- Participants gender and age distribution (this was retrieved outside Instagram in a form they have to collect users’ data)
- Engagement ranking by missions
- Localization maps and date and time charts
- and many other statistics, like IG filters used, and even a feature to select the winners of each mission.
Below you can check some minor screenshots of the widgets created.
Unfortunately, the system was abandoned in late 2017 when Facebook discontinued the Instagram REST API in favor of their GraphQL API. Despite the big investment to have the system, the company decided to not update the API connector as they were giving priority to other initiatives and this was unplanned on their budget.
At that time, the Instagram REST API documentation missed some important aspects that I had to learn by myself. As I was actively working with their API and participating in the community discussion, many times I shared my knowledge answering questions about it on Stack Overflow. And I even helped the Instagram team fix bugs I had found on the API.
Some answers I shared:
https://stackoverflow.com/questions/42206499/instagram-api-return-post-link/42234532#42234532
Extra: in 2015, Google Charts did not allow to zoom maps (I don’t know if it allows nowadays) and this was a requirement. So I’ve overcame this challenge using a CSS + JS trick and I also shared the solution with the community https://stackoverflow.com/questions/10142232/google-charts-geochart-zoom-in-closer/33349689#33349689.
