Un outil de tableau de bord avec les API d'oiseaux
Zacharie Samuels
24 mars 2022
1 min read
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.
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.
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 devrez vous assurer que vous exécutez Python 3.10 ou supérieur et installer les bibliothèques suivantes:
Python Library | Purpose |
|---|---|
requests | Communication API avec les services de Bird |
dash | Rendu UI et 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 (tel que AWS), consultez les ressources suivantes:
Pour accéder à cette app, vous devrez vous assurer que vous exécutez Python 3.10 ou supérieur et installer les bibliothèques suivantes:
Python Library | Purpose |
|---|---|
requests | Communication API avec les services de Bird |
dash | Rendu UI et 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 (tel que AWS), consultez les ressources suivantes:
Pour accéder à cette app, vous devrez vous assurer que vous exécutez Python 3.10 ou supérieur et installer les bibliothèques suivantes:
Python Library | Purpose |
|---|---|
requests | Communication API avec les services de Bird |
dash | Rendu UI et 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 (tel que AWS), consultez les ressources suivantes:
Création de la page Dashboard
Tout d'abord, initialisez le cadre de données et le tableau de bord. Sans initialiser le 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. C'est une combinaison d'un rappel d'application (pour vérifier quel onglet est utilisé) ; ainsi qu'une fonction conditionnelle pour vérifier quel onglet est actuellement sélectionné. Le code ci-dessous ne construit que le tableau de bord vierge et les éléments de l'interface utilisateur (nous aborderons l'onglet des événements plus tard). 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)
Remarquez avec dash à quel point il est simple de créer une interface utilisateur de tableau de bord avec une liste déroulante multi-sélection, et pouvant être recherchée. Pour désactiver la multi-sélection ou la recherche, les paramètres de création d'une liste déroulante 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 d'assurer le bon fonctionnement du HTML + CSS dans l'interface utilisateur.
L'API Metrics Time Series permet d'extraire 33 indicateurs individuels basés sur 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 accompagnés de l'analytique de remise pourraient être une future amélioration de ce projet (la capture d'erreurs devrait être implémentée pour les clients qui n'ont pas accès à l'analytique de remise).
En utilisant et en appelant l'API Metrics, je construis un tableau de bord avec les paramètres sélectionnés par l'utilisateur et la période spécifiée. Le tableau de bord initialisé est ensuite mis à jour.
Vue du tableau de bord (API Metrics Time Series)
# 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
Ce qui suit est un exemple de sélection de plusieurs indicateurs et d'une période élargie.
Remarque : de nombreux éléments sont intégrés automatiquement dans le graphique dash (survol, zoom, autoscale).
Tout d'abord, initialisez le cadre de données et le tableau de bord. Sans initialiser le 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. C'est une combinaison d'un rappel d'application (pour vérifier quel onglet est utilisé) ; ainsi qu'une fonction conditionnelle pour vérifier quel onglet est actuellement sélectionné. Le code ci-dessous ne construit que le tableau de bord vierge et les éléments de l'interface utilisateur (nous aborderons l'onglet des événements plus tard). 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)
Remarquez avec dash à quel point il est simple de créer une interface utilisateur de tableau de bord avec une liste déroulante multi-sélection, et pouvant être recherchée. Pour désactiver la multi-sélection ou la recherche, les paramètres de création d'une liste déroulante 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 d'assurer le bon fonctionnement du HTML + CSS dans l'interface utilisateur.
L'API Metrics Time Series permet d'extraire 33 indicateurs individuels basés sur 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 accompagnés de l'analytique de remise pourraient être une future amélioration de ce projet (la capture d'erreurs devrait être implémentée pour les clients qui n'ont pas accès à l'analytique de remise).
En utilisant et en appelant l'API Metrics, je construis un tableau de bord avec les paramètres sélectionnés par l'utilisateur et la période spécifiée. Le tableau de bord initialisé est ensuite mis à jour.
Vue du tableau de bord (API Metrics Time Series)
# 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
Ce qui suit est un exemple de sélection de plusieurs indicateurs et d'une période élargie.
Remarque : de nombreux éléments sont intégrés automatiquement dans le graphique dash (survol, zoom, autoscale).
Tout d'abord, initialisez le cadre de données et le tableau de bord. Sans initialiser le 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. C'est une combinaison d'un rappel d'application (pour vérifier quel onglet est utilisé) ; ainsi qu'une fonction conditionnelle pour vérifier quel onglet est actuellement sélectionné. Le code ci-dessous ne construit que le tableau de bord vierge et les éléments de l'interface utilisateur (nous aborderons l'onglet des événements plus tard). 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)
Remarquez avec dash à quel point il est simple de créer une interface utilisateur de tableau de bord avec une liste déroulante multi-sélection, et pouvant être recherchée. Pour désactiver la multi-sélection ou la recherche, les paramètres de création d'une liste déroulante 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 d'assurer le bon fonctionnement du HTML + CSS dans l'interface utilisateur.
L'API Metrics Time Series permet d'extraire 33 indicateurs individuels basés sur 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 accompagnés de l'analytique de remise pourraient être une future amélioration de ce projet (la capture d'erreurs devrait être implémentée pour les clients qui n'ont pas accès à l'analytique de remise).
En utilisant et en appelant l'API Metrics, je construis un tableau de bord avec les paramètres sélectionnés par l'utilisateur et la période spécifiée. Le tableau de bord initialisé est ensuite mis à jour.
Vue du tableau de bord (API Metrics Time Series)
# 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
Ce qui suit est un exemple de sélection de plusieurs indicateurs et d'une période élargie.
Remarque : de nombreux éléments sont intégrés automatiquement dans le graphique dash (survol, zoom, autoscale).
Création de la page Event Details
La page de détails de l'événement était un peu plus difficile car je ne savais pas la meilleure façon de présenter toutes 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 décidé de montrer tous les événements et de placer le timestamp en premier (car sans mettre le timestamp en premier, le graphique n'était pas facile à lire). Initialement, j'ai constaté qu'avec juste le HTML brut, le tableau était extrêmement difficile à l'œil. Il n'y avait pas de bordures et aucune différence de couleur pour l'en-tête par rapport aux lignes. Pour rendre le tableau plus facile à lire, j'ai pu utiliser CSS dans 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 le tableau de bord, sauf que cette fois-ci, j'appelle l'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 de l'API). Cela peut être augmenté, cependant, j'ai décidé de montrer les 10 événements les plus récents parce que plus d'événements sont montré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 Page Suivante / Page Précédente dans l'interface.
Pour construire l'onglet (page) des événements, tout d'abord, j'appelle l'Events API et je transforme la réponse JSON en un tableau de données. Ensuite, je trie et réorganise le tableau de données pour mettre le timestamp comme première colonne. Enfin, je construis le tableau HTML en itérant à travers le tableau 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 à ceci dans l'interface.
La page de détails de l'événement était un peu plus difficile car je ne savais pas la meilleure façon de présenter toutes 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 décidé de montrer tous les événements et de placer le timestamp en premier (car sans mettre le timestamp en premier, le graphique n'était pas facile à lire). Initialement, j'ai constaté qu'avec juste le HTML brut, le tableau était extrêmement difficile à l'œil. Il n'y avait pas de bordures et aucune différence de couleur pour l'en-tête par rapport aux lignes. Pour rendre le tableau plus facile à lire, j'ai pu utiliser CSS dans 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 le tableau de bord, sauf que cette fois-ci, j'appelle l'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 de l'API). Cela peut être augmenté, cependant, j'ai décidé de montrer les 10 événements les plus récents parce que plus d'événements sont montré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 Page Suivante / Page Précédente dans l'interface.
Pour construire l'onglet (page) des événements, tout d'abord, j'appelle l'Events API et je transforme la réponse JSON en un tableau de données. Ensuite, je trie et réorganise le tableau de données pour mettre le timestamp comme première colonne. Enfin, je construis le tableau HTML en itérant à travers le tableau 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 à ceci dans l'interface.
La page de détails de l'événement était un peu plus difficile car je ne savais pas la meilleure façon de présenter toutes 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 décidé de montrer tous les événements et de placer le timestamp en premier (car sans mettre le timestamp en premier, le graphique n'était pas facile à lire). Initialement, j'ai constaté qu'avec juste le HTML brut, le tableau était extrêmement difficile à l'œil. Il n'y avait pas de bordures et aucune différence de couleur pour l'en-tête par rapport aux lignes. Pour rendre le tableau plus facile à lire, j'ai pu utiliser CSS dans 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 le tableau de bord, sauf que cette fois-ci, j'appelle l'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 de l'API). Cela peut être augmenté, cependant, j'ai décidé de montrer les 10 événements les plus récents parce que plus d'événements sont montré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 Page Suivante / Page Précédente dans l'interface.
Pour construire l'onglet (page) des événements, tout d'abord, j'appelle l'Events API et je transforme la réponse JSON en un tableau de données. Ensuite, je trie et réorganise le tableau de données pour mettre le timestamp comme première colonne. Enfin, je construis le tableau HTML en itérant à travers le tableau 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 à ceci dans l'interface.
É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 les possibilités de personnalisation ici, seules votre imagination vous limitera.
Comme discuté ci-dessus, certaines améliorations futures pourraient être apportées :
Ajout d'analyses de délivrabilité au tableau de bord
Ajout de plus de filtres au tableau de bord
Possibles options de mise en cache 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 des détails des événements
Je serais intéressé d'entendre tout retour ou suggestions pour étendre ce projet.
~ Zach Samuels, Bird Senior Solutions Engineer
Pour quelqu'un cherchant à créer son propre tableau de bord ou journal d'événements, c'est un bon début. Avec les possibilités de personnalisation ici, seules votre imagination vous limitera.
Comme discuté ci-dessus, certaines améliorations futures pourraient être apportées :
Ajout d'analyses de délivrabilité au tableau de bord
Ajout de plus de filtres au tableau de bord
Possibles options de mise en cache 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 des détails des événements
Je serais intéressé d'entendre tout retour ou suggestions pour étendre ce projet.
~ Zach Samuels, Bird Senior Solutions Engineer
Pour quelqu'un cherchant à créer son propre tableau de bord ou journal d'événements, c'est un bon début. Avec les possibilités de personnalisation ici, seules votre imagination vous limitera.
Comme discuté ci-dessus, certaines améliorations futures pourraient être apportées :
Ajout d'analyses de délivrabilité au tableau de bord
Ajout de plus de filtres au tableau de bord
Possibles options de mise en cache 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 des détails des événements
Je serais intéressé d'entendre tout retour ou suggestions pour étendre ce projet.
~ Zach Samuels, Bird Senior Solutions Engineer
