Marketing Plotly Dash Application – Part 1: Reading Data

Introduction

Whenever we release a product to production we want people to consume the material presented such that profit is returned to the organization. A good way to introduce people to our projects is by using various ads platforms (Google Ads, Facebook Ads, Twitter Ads, TikTok Ads, etc.), however, the issue arises when we want to track all the data together. At times integration with one of the service providers becomes tricky causing difficulties to analyze the product’s achievements. But it is not all bad! To the rescue comes Windsor with its amazing services to integrate all platforms into a single API. In this tutorial, we will show how to read various data sources into our python code. Further, we will build a simple Plotly Dash application using this API. Without further ado, let’s get our hands dirty.

A running instance of the dashboard we will be building is deployed on Heroku. You can experiment with the final product before we start building it. Click here to play with it. Above you can see a screenshot of the final project too. Lastly, you can find the code to this project in the following GitHub repository: https://github.com/KryeKuzhinieri/windsor-ai-dash-application.

 

Development

Firstly, create a new folder and name it windsor_dashboard. Then, get your API key from the Windsor’s dashboard and save it into an .env file as described below

API_KEY = "your-key"

To avoid complications with different package versions, create a new python virtual environment and activate it by running

python -m venv venv
source venv/bin/activate

Install the prerequisite python libraries

pip install dash pandas pywindsorai python-dotenv

Dash is a python library needed for building quick plotly dash flask applications, pandas will be helpful for data wrangling, dotenv is required to fetch the secret key stored in the .env file, and pywindsorai is the API client to the Windsor services.

Let’s continue by adding our first python file named app.py to the project. For pedagogical reasons, we will add chunks of code sequentially. However, feel free to consult the source code on the GitHub page. Hence, let’s load the libraries needed

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import numpy as np
from dash.dependencies import Output, Input
from pywindsorai.client import Client
from dotenv import load_dotenv

Then, let’s get the API value from the .env file

load_dotenv()
API_KEY = os.getenv("API_KEY")

The data which we will be using is fetched from the Windsor.ai dashboard. Currently, I have connected my Google and Facebook ads with the corresponding account. The fields we want to use are campaign, clicks, datasource, source, and spend. The dataset can be imported into python by defining and calling the fetch_ad_data function.

def fetch_ad_dataset(API_KEY):
    client = Client(API_KEY)
    DATE = "last_7d"
    FIELDS = ["campaign", "clicks", "datasource", "source", "spend"]
    dataset = pd.DataFrame(client.connectors(date_preset=DATE, fields=FIELDS)["data"])
    return dataset

dataset = fetch_ad_dataset(API_KEY)

The dataset should look like the table below. Here we are showing only the first three rows.

         campaign       clicks  datasource  source  spend
0       Sales-Search-7      10  google_ads  google   5.27
1  Tableau Integration      14  google_ads  google  14.40
2     [MB]  Brand | WW      27  google_ads  google  27.32

 

References

This example was inspired by this tutorial.

Other plotly dash documentation can be found here.

 

Marketing Dash Application – Part 2: Plotly Dash App

Tags: