Un outil de tableau de bord avec les API d'oiseaux

Email

·

24 mars 2022

Un outil de tableau de bord avec les API d'oiseaux

Points Clés

    • Les APIs Bird peuvent être combinées avec Python et Plotly Dash pour créer des tableaux de bord puissants et interactifs sans avoir besoin de l'interface complète de Bird.

    • Le projet démontre comment visualiser les métriques et événements en utilisant l’API des métriques et l’API des événements de Bird au sein d'une application web personnalisée.

    • Plotly Dash fournit un cadre open-source rapide pour construire des éléments d'interface utilisateur comme des listes déroulantes, des graphiques et des tableaux.

    • Les développeurs peuvent étendre l'outil avec des analyses de délivrabilité, un filtrage et une pagination pour des tableaux de bord plus riches.

    • Les améliorations futures comprennent la mise en cache, une interface utilisateur améliorée, et l'intégration avec d'autres produits Bird ou des APIs tierces.

    • La base de code (disponible sur GitHub) offre un bon point de départ pour quiconque souhaite construire des tableaux de bord alimentés par Bird ou des portails destinés aux clients.

Points forts des Q&A

  • Quel est l'objectif de ce projet de dashboarding ?

    Il démontre comment les développeurs peuvent utiliser les API de Bird avec Python et Plotly Dash pour créer des tableaux de bord axés sur les données qui visualisent les métriques de campagne et les événements récents.

  • Pourquoi utiliser Plotly Dash pour les Bird APIs ?

    Dash est open source, facile à personnaliser, et idéal pour créer des interfaces utilisateur interactives sans nécessiter d'expertise en développement front-end.

  • Que montre le tableau de bord ?

    Il visualise les métriques de séries chronologiques de l'API des métriques de Bird et les données d'événements récents de l'API des événements, avec des options pour filtrer et sélectionner des métriques sur des plages de temps personnalisées.

  • Comment peut l'outil être étendu davantage ?

    En ajoutant des analyses de délivrabilité, des filtres avancés, la mise en cache de données et la pagination pour les grands ensembles de données afin d'améliorer les performances et l'utilisation.

  • Quelles compétences ou outils sont nécessaires pour le faire fonctionner ?

    Connaissances de base en Python et installation de requests, dash et pandas. Une clé API de Bird est nécessaire pour extraire des données.

  • Comment ce projet s'intègre-t-il dans l'écosystème de Bird ?

    Il illustre comment les API ouvertes de Bird peuvent être utilisées pour créer des tableaux de bord personnalisés et des outils de reporting pour les équipes ou les clients sans accès à la plateforme complète.

Ce script effleure à peine la surface de ce qui est possible en utilisant Python, Plotly Dash et nos API.

Bird Metrics API + Tableau de bord avec Python

Il y a presque un an, Tom Mairs, directeur du succès client de Bird, a créé un outil de mailing utilisant les APIs de Bird. Dans cet article, je reprends là où il s'est arrêté. Son outil permet la transmission programmée de tâches, mais que faire si nous voulons créer nos propres tableaux de bord et journaux d'événements ?

Peut-être que je veux créer un tableau de bord spécifique pour un groupe d'affaires ou un tableau de bord orienté client, mais ne pas fournir aux utilisateurs un accès complet à l'interface utilisateur de Bird. Ce script ne fait qu'effleurer les possibilités d'utilisation de Python, Plotly Dash et nos APIs. Lors de la création de tableaux de bord traitant des données API à haut volume, sachez que les composants d'infrastructure comme le DNS peuvent devenir des goulots d'étranglement - nous avons rencontré des problèmes de mise à l'échelle DNS avec AWS qui ont affecté nos capacités de traitement des données. Pour les passionnés de flux de travail visuel, vous pouvez également explorer l'intégration de Flow Builder avec Google Cloud Functions et Vision API pour ajouter de l'automatisation IA à vos pipelines de traitement de données.

Alors que je commençais mes recherches en ligne, je voulais trouver le chemin de moindre résistance. J'aurais pu créer tous les tableaux de bord et l'interface utilisateur moi-même en HTML et Python, cependant, après quelques recherches sur Google, je suis tombé sur Plotly’s Dash, qui s'intègre facilement avec Python. J'ai choisi Dash pour deux raisons : 1) c'est open source, et 2) après avoir lu la documentation, il semblait facilement personnalisable pour ce que je voulais faire. Dash est une bibliothèque open source idéale pour construire et déployer des applications de données avec des interfaces utilisateur personnalisées. Cela a rendu la création d'une interface utilisateur extrêmement simple. La question est alors devenue, à quel point je voulais complexifier cette application ? Plus je passais de temps, plus je voulais ajouter de fonctionnalités.

Pour le projet initial, je voulais m'assurer d'avoir un tableau de bord avec des métriques personnalisables et une plage de temps sélectionnable. Initialement, j'ai commencé avec un tableau de bord où vous ne pouviez choisir qu'un seul indicateur dans le menu déroulant. Ensuite, en recevant les retours de mes collègues, j'ai amélioré le tableau de bord pour ajouter la multi-sélection et les titres des axes. J'ai également décidé d'ajouter un onglet supplémentaire pour un journal des événements. Je suis arrivé à un point où j'étais satisfait de ce que j'avais comme bon point de départ pour quiconque souhaitant créer ses propres tableaux de bord. Pour les développeurs qui souhaitent intégrer des données de webhook en temps réel dans leurs tableaux de bord, consultez notre guide sur la création de consommateurs de webhook avec Azure Functions. Bien sûr, j'ai mis le projet sur Github pour que vous puissiez le cloner ou en faire une branche.

Commencer

Pour accéder à cette app, vous devez vous assurer que vous utilisez Python 3.10 ou une version supérieure et installer les bibliothèques suivantes :

Bibliothèque Python

But

requests

Communication API avec les services Bird

dash

Rendu de l'UI et du tableau de bord

pandas

Traitement des données et génération de tableaux

Ensuite, entrez votre clé API dans App.py et exécutez l'app. Elle fonctionnera sur http://localhost:8050. Pour plus d'informations sur le déploiement sur un serveur accessible au public (comme AWS), consultez les ressources suivantes :

Creating the Dashboard Page

Tout d'abord, initialisez le cadre de données et le tableau de bord. Sans initialisation du tableau de bord, aucun tableau de bord n'apparaîtra dans l'interface utilisateur.

df = pd.DataFrame({
    "Count": [0, 0],
    "Time": [0, 0]
})
fig = px.line(df, x="Time", y="Count")

Ensuite, construisez le premier onglet. Il s'agit d'une combinaison de rappel d'application (pour vérifier quel onglet est utilisé) et d'une fonction conditionnelle pour vérifier quel onglet est actuellement sélectionné. Le code ci-dessous configure uniquement le tableau de bord vierge et les éléments de l'UI (nous aborderons plus tard l'onglet des événements). Les éléments dcc sont les Dash Core Components et les HTML Components permettent facilement d'utiliser HTML dans l'interface utilisateur.

html.H2("Analytics Dashboard"),
# Multi-select dropdown
dcc.Dropdown(
    [
        "Count Accepted",
        "Count Admin Bounce",
        "Count Block Bounce",
        "Count Bounce",
        "Count Clicked",
        "Count Delayed",
        "Count Delayed First",
        "Count Delivered",
        "Count Delivered First",
        "Count Delivered Subsequent",
        "Count Generation Failed",
        "Count Generation Rejection",
        "Count Hard Bounce",
        "Count Inband Bounce",
        "Count Initial Rendered",
        "Count Injected",
        "Count Out of Band Bounce",
        "Count Policy Rejection",
        "Count Rejected",
        "Count Rendered",
        "Count Sent",
        "Count Soft Bounce",
        "Count Spam Complaint",
        "Count Targeted",
        "Count Undetermined Bounce",
        "Count Unique Clicked",
        "Count Unique Confirmed Opened",
        "Count Unique Initial Rendered",
        "Count Unique Rendered",
        "Count Unsubscribe",
        "Total Delivery Time First",
        "Total Delivery Time Subsequent",
        "Total Message Volume",
    ],
    id="y-axis",
    multi=True,
    searchable=True,
    placeholder="Select metrics(s)",
),
# Date selector (max date allowed is set to today's date)
dcc.DatePickerRange(
    id="date-picker-range",
    start_date=date(2022, 1, 1),
    end_date=date(2022, 2, 1),
    max_date_allowed=date(
        datetime.today().year,
        datetime.today().month,
        datetime.today().day,
    ),
),
# Graph object
dcc.Graph(id="Emails", figure=fig)

Notez avec Dash à quel point il est simple de créer une interface utilisateur de tableau de bord avec un menu déroulant multi-sélection et consultable. Pour désactiver la multi-sélection ou la recherche, les paramètres de création d'un menu déroulant peuvent être facilement modifiés. J'ai trouvé que la partie la plus complexe de ce projet était de construire réellement le cadre de données à partir des entrées, ainsi que de faire fonctionner correctement HTML + CSS dans l'UI.

L'API Time Series Metrics permet d'extraire 33 métriques individuelles en fonction d'une plage de date/heure. Vous pouvez filtrer plus en profondeur par Domaines, Campagnes, Pools d'IP, Domaines d'envoi, Sous-comptes, et spécifier la Précision des données de série temporelle. Ces filtres supplémentaires ainsi que l'analyse de la délivrabilité pourraient constituer une amélioration future de ce projet (la gestion des erreurs devrait être mise en œuvre pour les clients qui n'ont pas accès aux analyses de délivrabilité).

En utilisant et en appelant l'API Metrics, je crée un tableau de bord avec les paramètres sélectionnés par l'utilisateur et le cadre de temps spécifié. Le tableau de bord initialisé est ensuite mis à jour.

Vue du tableau de bord (API Time Series Metrics)

# Build the API call utilizing the parameters provided
params = {
    "from": start_date + "T00:00",
    "to": end_date + "T00:00",
    "delimiter": ",",
    "precision": "day",
    "metrics": joined_values
}
api_url = BASE_URL + "/metrics/deliverability/time-series"
response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params)
response_info = json.loads(response_API.text)
new_df = pd.json_normalize(response_info, record_path=['results'])
value_array = joined_values.split(",")
# Build out a new dashboard utilizing the new metrics and dates from the updated API call
fig = px.line(
    new_df,
    x=new_df['ts'],
    y=value_array,
    labels={"value": "Count", "variable": "Metric", "ts": "Date"}
)
fig.update_xaxes(title_text="Time")
fig.update_yaxes(title_text="Count")
return fig

L'exemple suivant montre des multiples métriques sélectionnées et une période prolongée.


Sparkpost analytics dashboard

Note : il y a de nombreux éléments intégrés au graphique Dash automatiquement (survol, zoom, mise à l'échelle automatique).

Tout d'abord, initialisez le cadre de données et le tableau de bord. Sans initialisation du tableau de bord, aucun tableau de bord n'apparaîtra dans l'interface utilisateur.

df = pd.DataFrame({
    "Count": [0, 0],
    "Time": [0, 0]
})
fig = px.line(df, x="Time", y="Count")

Ensuite, construisez le premier onglet. Il s'agit d'une combinaison de rappel d'application (pour vérifier quel onglet est utilisé) et d'une fonction conditionnelle pour vérifier quel onglet est actuellement sélectionné. Le code ci-dessous configure uniquement le tableau de bord vierge et les éléments de l'UI (nous aborderons plus tard l'onglet des événements). Les éléments dcc sont les Dash Core Components et les HTML Components permettent facilement d'utiliser HTML dans l'interface utilisateur.

html.H2("Analytics Dashboard"),
# Multi-select dropdown
dcc.Dropdown(
    [
        "Count Accepted",
        "Count Admin Bounce",
        "Count Block Bounce",
        "Count Bounce",
        "Count Clicked",
        "Count Delayed",
        "Count Delayed First",
        "Count Delivered",
        "Count Delivered First",
        "Count Delivered Subsequent",
        "Count Generation Failed",
        "Count Generation Rejection",
        "Count Hard Bounce",
        "Count Inband Bounce",
        "Count Initial Rendered",
        "Count Injected",
        "Count Out of Band Bounce",
        "Count Policy Rejection",
        "Count Rejected",
        "Count Rendered",
        "Count Sent",
        "Count Soft Bounce",
        "Count Spam Complaint",
        "Count Targeted",
        "Count Undetermined Bounce",
        "Count Unique Clicked",
        "Count Unique Confirmed Opened",
        "Count Unique Initial Rendered",
        "Count Unique Rendered",
        "Count Unsubscribe",
        "Total Delivery Time First",
        "Total Delivery Time Subsequent",
        "Total Message Volume",
    ],
    id="y-axis",
    multi=True,
    searchable=True,
    placeholder="Select metrics(s)",
),
# Date selector (max date allowed is set to today's date)
dcc.DatePickerRange(
    id="date-picker-range",
    start_date=date(2022, 1, 1),
    end_date=date(2022, 2, 1),
    max_date_allowed=date(
        datetime.today().year,
        datetime.today().month,
        datetime.today().day,
    ),
),
# Graph object
dcc.Graph(id="Emails", figure=fig)

Notez avec Dash à quel point il est simple de créer une interface utilisateur de tableau de bord avec un menu déroulant multi-sélection et consultable. Pour désactiver la multi-sélection ou la recherche, les paramètres de création d'un menu déroulant peuvent être facilement modifiés. J'ai trouvé que la partie la plus complexe de ce projet était de construire réellement le cadre de données à partir des entrées, ainsi que de faire fonctionner correctement HTML + CSS dans l'UI.

L'API Time Series Metrics permet d'extraire 33 métriques individuelles en fonction d'une plage de date/heure. Vous pouvez filtrer plus en profondeur par Domaines, Campagnes, Pools d'IP, Domaines d'envoi, Sous-comptes, et spécifier la Précision des données de série temporelle. Ces filtres supplémentaires ainsi que l'analyse de la délivrabilité pourraient constituer une amélioration future de ce projet (la gestion des erreurs devrait être mise en œuvre pour les clients qui n'ont pas accès aux analyses de délivrabilité).

En utilisant et en appelant l'API Metrics, je crée un tableau de bord avec les paramètres sélectionnés par l'utilisateur et le cadre de temps spécifié. Le tableau de bord initialisé est ensuite mis à jour.

Vue du tableau de bord (API Time Series Metrics)

# Build the API call utilizing the parameters provided
params = {
    "from": start_date + "T00:00",
    "to": end_date + "T00:00",
    "delimiter": ",",
    "precision": "day",
    "metrics": joined_values
}
api_url = BASE_URL + "/metrics/deliverability/time-series"
response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params)
response_info = json.loads(response_API.text)
new_df = pd.json_normalize(response_info, record_path=['results'])
value_array = joined_values.split(",")
# Build out a new dashboard utilizing the new metrics and dates from the updated API call
fig = px.line(
    new_df,
    x=new_df['ts'],
    y=value_array,
    labels={"value": "Count", "variable": "Metric", "ts": "Date"}
)
fig.update_xaxes(title_text="Time")
fig.update_yaxes(title_text="Count")
return fig

L'exemple suivant montre des multiples métriques sélectionnées et une période prolongée.


Sparkpost analytics dashboard

Note : il y a de nombreux éléments intégrés au graphique Dash automatiquement (survol, zoom, mise à l'échelle automatique).

Tout d'abord, initialisez le cadre de données et le tableau de bord. Sans initialisation du tableau de bord, aucun tableau de bord n'apparaîtra dans l'interface utilisateur.

df = pd.DataFrame({
    "Count": [0, 0],
    "Time": [0, 0]
})
fig = px.line(df, x="Time", y="Count")

Ensuite, construisez le premier onglet. Il s'agit d'une combinaison de rappel d'application (pour vérifier quel onglet est utilisé) et d'une fonction conditionnelle pour vérifier quel onglet est actuellement sélectionné. Le code ci-dessous configure uniquement le tableau de bord vierge et les éléments de l'UI (nous aborderons plus tard l'onglet des événements). Les éléments dcc sont les Dash Core Components et les HTML Components permettent facilement d'utiliser HTML dans l'interface utilisateur.

html.H2("Analytics Dashboard"),
# Multi-select dropdown
dcc.Dropdown(
    [
        "Count Accepted",
        "Count Admin Bounce",
        "Count Block Bounce",
        "Count Bounce",
        "Count Clicked",
        "Count Delayed",
        "Count Delayed First",
        "Count Delivered",
        "Count Delivered First",
        "Count Delivered Subsequent",
        "Count Generation Failed",
        "Count Generation Rejection",
        "Count Hard Bounce",
        "Count Inband Bounce",
        "Count Initial Rendered",
        "Count Injected",
        "Count Out of Band Bounce",
        "Count Policy Rejection",
        "Count Rejected",
        "Count Rendered",
        "Count Sent",
        "Count Soft Bounce",
        "Count Spam Complaint",
        "Count Targeted",
        "Count Undetermined Bounce",
        "Count Unique Clicked",
        "Count Unique Confirmed Opened",
        "Count Unique Initial Rendered",
        "Count Unique Rendered",
        "Count Unsubscribe",
        "Total Delivery Time First",
        "Total Delivery Time Subsequent",
        "Total Message Volume",
    ],
    id="y-axis",
    multi=True,
    searchable=True,
    placeholder="Select metrics(s)",
),
# Date selector (max date allowed is set to today's date)
dcc.DatePickerRange(
    id="date-picker-range",
    start_date=date(2022, 1, 1),
    end_date=date(2022, 2, 1),
    max_date_allowed=date(
        datetime.today().year,
        datetime.today().month,
        datetime.today().day,
    ),
),
# Graph object
dcc.Graph(id="Emails", figure=fig)

Notez avec Dash à quel point il est simple de créer une interface utilisateur de tableau de bord avec un menu déroulant multi-sélection et consultable. Pour désactiver la multi-sélection ou la recherche, les paramètres de création d'un menu déroulant peuvent être facilement modifiés. J'ai trouvé que la partie la plus complexe de ce projet était de construire réellement le cadre de données à partir des entrées, ainsi que de faire fonctionner correctement HTML + CSS dans l'UI.

L'API Time Series Metrics permet d'extraire 33 métriques individuelles en fonction d'une plage de date/heure. Vous pouvez filtrer plus en profondeur par Domaines, Campagnes, Pools d'IP, Domaines d'envoi, Sous-comptes, et spécifier la Précision des données de série temporelle. Ces filtres supplémentaires ainsi que l'analyse de la délivrabilité pourraient constituer une amélioration future de ce projet (la gestion des erreurs devrait être mise en œuvre pour les clients qui n'ont pas accès aux analyses de délivrabilité).

En utilisant et en appelant l'API Metrics, je crée un tableau de bord avec les paramètres sélectionnés par l'utilisateur et le cadre de temps spécifié. Le tableau de bord initialisé est ensuite mis à jour.

Vue du tableau de bord (API Time Series Metrics)

# Build the API call utilizing the parameters provided
params = {
    "from": start_date + "T00:00",
    "to": end_date + "T00:00",
    "delimiter": ",",
    "precision": "day",
    "metrics": joined_values
}
api_url = BASE_URL + "/metrics/deliverability/time-series"
response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params)
response_info = json.loads(response_API.text)
new_df = pd.json_normalize(response_info, record_path=['results'])
value_array = joined_values.split(",")
# Build out a new dashboard utilizing the new metrics and dates from the updated API call
fig = px.line(
    new_df,
    x=new_df['ts'],
    y=value_array,
    labels={"value": "Count", "variable": "Metric", "ts": "Date"}
)
fig.update_xaxes(title_text="Time")
fig.update_yaxes(title_text="Count")
return fig

L'exemple suivant montre des multiples métriques sélectionnées et une période prolongée.


Sparkpost analytics dashboard

Note : il y a de nombreux éléments intégrés au graphique Dash automatiquement (survol, zoom, mise à l'échelle automatique).

Créer la Page des Détails de l'Événement

La page de détails de l'événement était un peu plus difficile car je ne savais pas comment présenter au mieux tous les métriques des événements de manière facile à lire. J'ai envisagé d'ajouter des paramètres de filtrage à cette page, cependant, j'ai décidé que cela ajouterait un temps considérable à ce projet, car le tableau devrait alors être dynamique (en plus d'ajouter les paramètres, les callbacks, etc.). J'ai choisi de montrer tous les événements et de placer d'abord le timestamp (car sans mettre le timestamp en premier, le graphique n'était pas facile à lire). Au départ, j'ai constaté qu'avec juste le HTML brut, le tableau était incroyablement difficile pour les yeux. Il n'y avait pas de bordures ni de différences de couleur entre l'en-tête et les lignes. Pour rendre le tableau plus facile à lire, j'ai pu utiliser du CSS avec Dash.

Vue des Détails de l'Événement (Events API)

L'idée pour les détails de l'événement est presque la même que pour le tableau de bord, sauf que cette fois, j'appelle le Events API et j'intègre tous les événements. Notez que les détails de l'événement ne montrent que les 10 événements les plus récents (en utilisant le paramètre max_rows et le filtrage API). Cela peut être augmenté, cependant, j'ai choisi de montrer les 10 événements les plus récents parce que plus il y a d'événements affichés, plus l'appel API prend du temps. Une amélioration significative qui pourrait être faite serait la possibilité de paginer et d'inclure une option Page Suivante / Page Précédente dans l'interface utilisateur.

Pour créer l'onglet des événements (page), d'abord, j'appelle l'Events API et j'analyse la réponse JSON dans un cadre de données. Ensuite, je trie et réorganise le cadre de données pour placer le timestamp comme première colonne. Enfin, je construis le tableau HTML en itérant à travers le cadre de données.

# Build out and call the events API
params = {
    "events": "delivery,injection,bounce,delay,policy_rejection,out_of_band,open,click,"
              "generation_failure,generation_rejection,spam_complaint,list_unsubscribe,link_unsubscribe",
    "delimiter": ",",
    "page": "1",
    "per_page": "10",
}
api_url = f"{BASE_URL}/events/message"
response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params)
response_info = response_API.json()
new_df = pd.json_normalize(response_info, record_path=["results"])
max_rows = 10  # Max number of results to show in the events table
# Sort columns and place timestamp as the first column in the table
new_df = new_df.reindex(sorted(new_df.columns), axis=1)
cols = ["timestamp"]
new_df = new_df[cols + [c for c in new_df.columns if c not in cols]]
# Show the new HTML with the events table (note: this table also references table.css)
return html.Div([
    html.H2("Event Details"),
    html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in new_df.columns], className="table_css")
        ),
        html.Tbody([
            html.Tr([
                html.Td(new_df.iloc[i][col], className="table_css")
                for col in new_df.columns
            ])
            for i in range(min(len(new_df), max_rows))
        ])
    ])
])

Ce qui ressemble à cela dans l'interface utilisateur.

Sparkpost event details

La page de détails de l'événement était un peu plus difficile car je ne savais pas comment présenter au mieux tous les métriques des événements de manière facile à lire. J'ai envisagé d'ajouter des paramètres de filtrage à cette page, cependant, j'ai décidé que cela ajouterait un temps considérable à ce projet, car le tableau devrait alors être dynamique (en plus d'ajouter les paramètres, les callbacks, etc.). J'ai choisi de montrer tous les événements et de placer d'abord le timestamp (car sans mettre le timestamp en premier, le graphique n'était pas facile à lire). Au départ, j'ai constaté qu'avec juste le HTML brut, le tableau était incroyablement difficile pour les yeux. Il n'y avait pas de bordures ni de différences de couleur entre l'en-tête et les lignes. Pour rendre le tableau plus facile à lire, j'ai pu utiliser du CSS avec Dash.

Vue des Détails de l'Événement (Events API)

L'idée pour les détails de l'événement est presque la même que pour le tableau de bord, sauf que cette fois, j'appelle le Events API et j'intègre tous les événements. Notez que les détails de l'événement ne montrent que les 10 événements les plus récents (en utilisant le paramètre max_rows et le filtrage API). Cela peut être augmenté, cependant, j'ai choisi de montrer les 10 événements les plus récents parce que plus il y a d'événements affichés, plus l'appel API prend du temps. Une amélioration significative qui pourrait être faite serait la possibilité de paginer et d'inclure une option Page Suivante / Page Précédente dans l'interface utilisateur.

Pour créer l'onglet des événements (page), d'abord, j'appelle l'Events API et j'analyse la réponse JSON dans un cadre de données. Ensuite, je trie et réorganise le cadre de données pour placer le timestamp comme première colonne. Enfin, je construis le tableau HTML en itérant à travers le cadre de données.

# Build out and call the events API
params = {
    "events": "delivery,injection,bounce,delay,policy_rejection,out_of_band,open,click,"
              "generation_failure,generation_rejection,spam_complaint,list_unsubscribe,link_unsubscribe",
    "delimiter": ",",
    "page": "1",
    "per_page": "10",
}
api_url = f"{BASE_URL}/events/message"
response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params)
response_info = response_API.json()
new_df = pd.json_normalize(response_info, record_path=["results"])
max_rows = 10  # Max number of results to show in the events table
# Sort columns and place timestamp as the first column in the table
new_df = new_df.reindex(sorted(new_df.columns), axis=1)
cols = ["timestamp"]
new_df = new_df[cols + [c for c in new_df.columns if c not in cols]]
# Show the new HTML with the events table (note: this table also references table.css)
return html.Div([
    html.H2("Event Details"),
    html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in new_df.columns], className="table_css")
        ),
        html.Tbody([
            html.Tr([
                html.Td(new_df.iloc[i][col], className="table_css")
                for col in new_df.columns
            ])
            for i in range(min(len(new_df), max_rows))
        ])
    ])
])

Ce qui ressemble à cela dans l'interface utilisateur.

Sparkpost event details

La page de détails de l'événement était un peu plus difficile car je ne savais pas comment présenter au mieux tous les métriques des événements de manière facile à lire. J'ai envisagé d'ajouter des paramètres de filtrage à cette page, cependant, j'ai décidé que cela ajouterait un temps considérable à ce projet, car le tableau devrait alors être dynamique (en plus d'ajouter les paramètres, les callbacks, etc.). J'ai choisi de montrer tous les événements et de placer d'abord le timestamp (car sans mettre le timestamp en premier, le graphique n'était pas facile à lire). Au départ, j'ai constaté qu'avec juste le HTML brut, le tableau était incroyablement difficile pour les yeux. Il n'y avait pas de bordures ni de différences de couleur entre l'en-tête et les lignes. Pour rendre le tableau plus facile à lire, j'ai pu utiliser du CSS avec Dash.

Vue des Détails de l'Événement (Events API)

L'idée pour les détails de l'événement est presque la même que pour le tableau de bord, sauf que cette fois, j'appelle le Events API et j'intègre tous les événements. Notez que les détails de l'événement ne montrent que les 10 événements les plus récents (en utilisant le paramètre max_rows et le filtrage API). Cela peut être augmenté, cependant, j'ai choisi de montrer les 10 événements les plus récents parce que plus il y a d'événements affichés, plus l'appel API prend du temps. Une amélioration significative qui pourrait être faite serait la possibilité de paginer et d'inclure une option Page Suivante / Page Précédente dans l'interface utilisateur.

Pour créer l'onglet des événements (page), d'abord, j'appelle l'Events API et j'analyse la réponse JSON dans un cadre de données. Ensuite, je trie et réorganise le cadre de données pour placer le timestamp comme première colonne. Enfin, je construis le tableau HTML en itérant à travers le cadre de données.

# Build out and call the events API
params = {
    "events": "delivery,injection,bounce,delay,policy_rejection,out_of_band,open,click,"
              "generation_failure,generation_rejection,spam_complaint,list_unsubscribe,link_unsubscribe",
    "delimiter": ",",
    "page": "1",
    "per_page": "10",
}
api_url = f"{BASE_URL}/events/message"
response_API = requests.get(api_url, headers={"Authorization": API_KEY}, params=params)
response_info = response_API.json()
new_df = pd.json_normalize(response_info, record_path=["results"])
max_rows = 10  # Max number of results to show in the events table
# Sort columns and place timestamp as the first column in the table
new_df = new_df.reindex(sorted(new_df.columns), axis=1)
cols = ["timestamp"]
new_df = new_df[cols + [c for c in new_df.columns if c not in cols]]
# Show the new HTML with the events table (note: this table also references table.css)
return html.Div([
    html.H2("Event Details"),
    html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in new_df.columns], className="table_css")
        ),
        html.Tbody([
            html.Tr([
                html.Td(new_df.iloc[i][col], className="table_css")
                for col in new_df.columns
            ])
            for i in range(min(len(new_df), max_rows))
        ])
    ])
])

Ce qui ressemble à cela dans l'interface utilisateur.

Sparkpost event details

Étapes suivantes

Pour quelqu'un cherchant à créer son propre tableau de bord ou journal d'événements, c'est un bon début. Avec la personnalisation ici, le ciel est la limite.

Comme discuté ci-dessus, certaines améliorations futures qui pourraient être faites sont :

  • Ajouter des analyses de délivrabilité au tableau de bord

  • Ajouter plus de filtres au tableau de bord

  • Options de mise en cache possible pour que l'API ne soit pas appelée à chaque fois pour afficher les pages

  • Améliorations de l'UI

  • Ajout de filtres et de pagination à la page de détails des événements

Je serais intéressé par recueillir tout retour ou toute suggestion pour étendre ce projet.

~ Zach Samuels, Bird Senior Solutions Engineer

Autres nouvelles

Lire plus de cette catégorie

Email

·

26 mai 2022

Créer un outil de validation des destinataires d'oiseaux asynchrones en vrac

14 mai 2017

Prise en main avec CppUTest

Platform & Infrastructure

·

22 mars 2022

Utiliser Bird’s Products Combined

A person is standing at a desk while typing on a laptop.

La plateforme native AI complète qui évolue avec votre business.

Contactez les ventes

Commencez gratuitement

© 2026 Bird

Contactez le Support

A person is standing at a desk while typing on a laptop.

La plateforme native AI complète qui évolue avec votre business.

Contactez les ventes

Commencez gratuitement

© 2026 Bird

Contactez le Support

A person is standing at a desk while typing on a laptop.

La plateforme native AI complète qui évolue avec votre business.

Contactez les ventes

Commencez gratuitement

© 2026 Bird

Contactez le Support