Ein Dashboarding-Tool mit Bird APIs
Zachary Samuels
24.03.2022
1 min read
Wichtige Erkenntnisse
Bird APIs können mit Python und Plotly Dash kombiniert werden, um leistungsstarke, interaktive Dashboards zu erstellen, ohne die vollständige Bird UI zu benötigen.
Das Projekt zeigt, wie man Metriken und Ereignisse visualisieren kann, indem man Bird’s Metrics API und Events API in einer benutzerdefinierten Webanwendung verwendet.
Plotly Dash bietet ein schnelles, quelloffenes Framework zum Erstellen von UI-Elementen wie Dropdown-Menüs, Diagrammen und Tabellen.
Entwickler können das Tool mit Zustellbarkeitsanalysen, Filterung und Paginierung für reichhaltigere Dashboards erweitern.
Zukünftige Verbesserungen beinhalten Caching, verbesserte UI und die Integration mit anderen Bird-Produkten oder Drittanbieter-APIs.
Der Code (verfügbar auf GitHub) bietet einen soliden Ausgangspunkt für alle, die Bird-gestützte Dashboards oder kundenorientierte Portale erstellen möchten.
Q&A Highlights
Was ist das Ziel dieses Dashboarding-Projekts?
Es zeigt, wie Entwickler Bird APIs mit Python und Plotly Dash verwenden können, um datengesteuerte Dashboards zu erstellen, die Kampagnenmetriken und aktuelle Ereignisse visualisieren.
Warum Plotly Dash für Bird APIs verwenden?
Dash ist Open Source, einfach zu individualisieren und ideal für die Erstellung interaktiver Benutzeroberflächen, ohne dass Front-End-Expertise erforderlich ist.
Was zeigt das Dashboard an?
Es visualisiert Zeitreihenmetriken aus der Bird’s Metrics API und aktuelle Ereignisdaten aus der Events API, mit Optionen zum Filtern und Auswählen von Metriken über benutzerdefinierte Zeitbereiche.
Wie kann das Tool weiter ausgebaut werden?
Durch das Hinzufügen von Zustellbarkeitsanalysen, erweiterten Filtern, Daten-Caching und Paginierung für große Datensätze zur Verbesserung der Leistung und Benutzerfreundlichkeit.
Welche Fähigkeiten oder Werkzeuge sind erforderlich, um es zu betreiben?
Grundkenntnisse in Python und Installation von requests, dash und pandas. Ein API-Schlüssel von Bird ist erforderlich, um Daten abzurufen.
Wie passt dieses Projekt in Birds Ökosystem?
Es zeigt, wie Birds offene APIs genutzt werden können, um benutzerdefinierte Dashboards und Berichtswerkzeuge für Teams oder Kunden zu erstellen, die keinen Zugang zur vollständigen Plattform haben.
Dieses Skript kratzt nur an der Oberfläche dessen, was mit Python, Plotly Dash und unseren APIs möglich ist.
Bird Metrics API + Dashboarding mit Python
Vor fast einem Jahr schrieb Tom Mairs, Birds Direktor für Kundenerfolg, ein Mailing-Tool unter Verwendung von Bird APIs. In diesem Beitrag knüpfe ich dort an, wo er aufgehört hat. Sein Tool ermöglicht die zeitgesteuerte Übertragung von Jobs, aber was ist, wenn wir unsere eigenen Dashboards und Ereignisprotokolle erstellen möchten?
Vielleicht möchte ich ein spezifisches Dashboard für eine Unternehmensgruppe oder ein kundenorientiertes Dashboard erstellen, aber den Benutzern nicht den vollständigen Zugriff auf die Bird UI gewähren. Dieses Skript berührt nur die Oberfläche dessen, was mit Python, Plotly Dash und unseren APIs möglich ist. Beim Erstellen von Dashboards, die API-Daten in hoher Menge verarbeiten, sei sich bewusst, dass Infrastrukturkomponenten wie DNS zu Engpässen werden können - wir haben AWS DNS Skalierungsherausforderungen erlebt, die unsere Datenverarbeitungskapazitäten beeinträchtigten. Für visuelle Workflow-Enthusiasten können Sie auch Flow Builder mit Google Cloud Functions und Vision API integrieren, um KI-gesteuerte Automatisierung zu Ihren Datenverarbeitungspipelines hinzuzufügen.
Als ich online zu suchen begann, wollte ich den Weg des geringsten Widerstands finden. Ich hätte alle Dashboards und die UI selbst in HTML und Python erstellen können, jedoch bin ich nach einigen Google-Suchen auf Plotly’s Dash gestoßen, das sich leicht mit Python integriert. Ich habe Dash aus 2 Gründen gewählt: 1) es ist Open Source und 2) nach dem Lesen der Dokumentation schien es sich leicht anpassen zu lassen für das, was ich versuchen wollte zu tun. Dash ist eine Open-Source-Bibliothek, die ideal ist für das Erstellen und Bereitstellen von Daten-Apps mit individuell gestalteten Benutzeroberflächen. Dadurch wurde das Erstellen einer UI extrem einfach. Die Frage wurde dann, wie komplex ich diese App gestalten wollte. Je mehr Zeit ich investierte, desto mehr Funktionen wollte ich hinzufügen.
Für das Initialprojekt wollte ich sicherstellen, dass ich ein Dashboard mit anpassbaren Metriken und einem auswählbaren Zeitrahmen hatte. Zunächst begann ich mit einem Dashboard, bei dem man nur eine Metrik aus dem Dropdown auswählen konnte. Dann, als ich Feedback von Kollegen erhielt, habe ich das Dashboard ein wenig verfeinert, um Multi-Select und Achsentitel hinzuzufügen. Ich habe mich auch entschieden, eine zusätzliche Registerkarte für ein Ereignisprotokoll hinzuzufügen. Ich kam an den Punkt, an dem ich zufrieden war mit dem, was ich als guten Ausgangspunkt für alle hatte, die ihre eigenen Dashboards erstellen möchten. Für Entwickler, die Echtzeit-Webhook-Daten in ihre Dashboards einspeisen möchten, werfen Sie einen Blick auf unseren Leitfaden zum Erstellen von Webhook-Konsumenten mit Azure Functions. Natürlich habe ich das Projekt in Github gestellt, damit Sie es klonen oder verzweigen können.
Bird Metrics API + Dashboarding mit Python
Vor fast einem Jahr schrieb Tom Mairs, Birds Direktor für Kundenerfolg, ein Mailing-Tool unter Verwendung von Bird APIs. In diesem Beitrag knüpfe ich dort an, wo er aufgehört hat. Sein Tool ermöglicht die zeitgesteuerte Übertragung von Jobs, aber was ist, wenn wir unsere eigenen Dashboards und Ereignisprotokolle erstellen möchten?
Vielleicht möchte ich ein spezifisches Dashboard für eine Unternehmensgruppe oder ein kundenorientiertes Dashboard erstellen, aber den Benutzern nicht den vollständigen Zugriff auf die Bird UI gewähren. Dieses Skript berührt nur die Oberfläche dessen, was mit Python, Plotly Dash und unseren APIs möglich ist. Beim Erstellen von Dashboards, die API-Daten in hoher Menge verarbeiten, sei sich bewusst, dass Infrastrukturkomponenten wie DNS zu Engpässen werden können - wir haben AWS DNS Skalierungsherausforderungen erlebt, die unsere Datenverarbeitungskapazitäten beeinträchtigten. Für visuelle Workflow-Enthusiasten können Sie auch Flow Builder mit Google Cloud Functions und Vision API integrieren, um KI-gesteuerte Automatisierung zu Ihren Datenverarbeitungspipelines hinzuzufügen.
Als ich online zu suchen begann, wollte ich den Weg des geringsten Widerstands finden. Ich hätte alle Dashboards und die UI selbst in HTML und Python erstellen können, jedoch bin ich nach einigen Google-Suchen auf Plotly’s Dash gestoßen, das sich leicht mit Python integriert. Ich habe Dash aus 2 Gründen gewählt: 1) es ist Open Source und 2) nach dem Lesen der Dokumentation schien es sich leicht anpassen zu lassen für das, was ich versuchen wollte zu tun. Dash ist eine Open-Source-Bibliothek, die ideal ist für das Erstellen und Bereitstellen von Daten-Apps mit individuell gestalteten Benutzeroberflächen. Dadurch wurde das Erstellen einer UI extrem einfach. Die Frage wurde dann, wie komplex ich diese App gestalten wollte. Je mehr Zeit ich investierte, desto mehr Funktionen wollte ich hinzufügen.
Für das Initialprojekt wollte ich sicherstellen, dass ich ein Dashboard mit anpassbaren Metriken und einem auswählbaren Zeitrahmen hatte. Zunächst begann ich mit einem Dashboard, bei dem man nur eine Metrik aus dem Dropdown auswählen konnte. Dann, als ich Feedback von Kollegen erhielt, habe ich das Dashboard ein wenig verfeinert, um Multi-Select und Achsentitel hinzuzufügen. Ich habe mich auch entschieden, eine zusätzliche Registerkarte für ein Ereignisprotokoll hinzuzufügen. Ich kam an den Punkt, an dem ich zufrieden war mit dem, was ich als guten Ausgangspunkt für alle hatte, die ihre eigenen Dashboards erstellen möchten. Für Entwickler, die Echtzeit-Webhook-Daten in ihre Dashboards einspeisen möchten, werfen Sie einen Blick auf unseren Leitfaden zum Erstellen von Webhook-Konsumenten mit Azure Functions. Natürlich habe ich das Projekt in Github gestellt, damit Sie es klonen oder verzweigen können.
Bird Metrics API + Dashboarding mit Python
Vor fast einem Jahr schrieb Tom Mairs, Birds Direktor für Kundenerfolg, ein Mailing-Tool unter Verwendung von Bird APIs. In diesem Beitrag knüpfe ich dort an, wo er aufgehört hat. Sein Tool ermöglicht die zeitgesteuerte Übertragung von Jobs, aber was ist, wenn wir unsere eigenen Dashboards und Ereignisprotokolle erstellen möchten?
Vielleicht möchte ich ein spezifisches Dashboard für eine Unternehmensgruppe oder ein kundenorientiertes Dashboard erstellen, aber den Benutzern nicht den vollständigen Zugriff auf die Bird UI gewähren. Dieses Skript berührt nur die Oberfläche dessen, was mit Python, Plotly Dash und unseren APIs möglich ist. Beim Erstellen von Dashboards, die API-Daten in hoher Menge verarbeiten, sei sich bewusst, dass Infrastrukturkomponenten wie DNS zu Engpässen werden können - wir haben AWS DNS Skalierungsherausforderungen erlebt, die unsere Datenverarbeitungskapazitäten beeinträchtigten. Für visuelle Workflow-Enthusiasten können Sie auch Flow Builder mit Google Cloud Functions und Vision API integrieren, um KI-gesteuerte Automatisierung zu Ihren Datenverarbeitungspipelines hinzuzufügen.
Als ich online zu suchen begann, wollte ich den Weg des geringsten Widerstands finden. Ich hätte alle Dashboards und die UI selbst in HTML und Python erstellen können, jedoch bin ich nach einigen Google-Suchen auf Plotly’s Dash gestoßen, das sich leicht mit Python integriert. Ich habe Dash aus 2 Gründen gewählt: 1) es ist Open Source und 2) nach dem Lesen der Dokumentation schien es sich leicht anpassen zu lassen für das, was ich versuchen wollte zu tun. Dash ist eine Open-Source-Bibliothek, die ideal ist für das Erstellen und Bereitstellen von Daten-Apps mit individuell gestalteten Benutzeroberflächen. Dadurch wurde das Erstellen einer UI extrem einfach. Die Frage wurde dann, wie komplex ich diese App gestalten wollte. Je mehr Zeit ich investierte, desto mehr Funktionen wollte ich hinzufügen.
Für das Initialprojekt wollte ich sicherstellen, dass ich ein Dashboard mit anpassbaren Metriken und einem auswählbaren Zeitrahmen hatte. Zunächst begann ich mit einem Dashboard, bei dem man nur eine Metrik aus dem Dropdown auswählen konnte. Dann, als ich Feedback von Kollegen erhielt, habe ich das Dashboard ein wenig verfeinert, um Multi-Select und Achsentitel hinzuzufügen. Ich habe mich auch entschieden, eine zusätzliche Registerkarte für ein Ereignisprotokoll hinzuzufügen. Ich kam an den Punkt, an dem ich zufrieden war mit dem, was ich als guten Ausgangspunkt für alle hatte, die ihre eigenen Dashboards erstellen möchten. Für Entwickler, die Echtzeit-Webhook-Daten in ihre Dashboards einspeisen möchten, werfen Sie einen Blick auf unseren Leitfaden zum Erstellen von Webhook-Konsumenten mit Azure Functions. Natürlich habe ich das Projekt in Github gestellt, damit Sie es klonen oder verzweigen können.
Erste Schritte
Um auf diese app zuzugreifen, müssen Sie sicherstellen, dass Sie Python 3.10 oder höher verwenden und die folgenden Bibliotheken installieren:
Python Library | Zweck |
|---|---|
requests | API-Kommunikation mit Bird-Diensten |
dash | UI- und Dashboard-Rendering |
pandas | Datenverarbeitung und Tabellenerstellung |
Geben Sie dann Ihren API-Schlüssel in App.py ein und führen Sie die App aus. Sie wird auf http://localhost:8050 ausgeführt. Weitere Informationen zur Bereitstellung auf einem öffentlich zugänglichen Server (wie AWS) finden Sie in den folgenden Ressourcen:
Um auf diese app zuzugreifen, müssen Sie sicherstellen, dass Sie Python 3.10 oder höher verwenden und die folgenden Bibliotheken installieren:
Python Library | Zweck |
|---|---|
requests | API-Kommunikation mit Bird-Diensten |
dash | UI- und Dashboard-Rendering |
pandas | Datenverarbeitung und Tabellenerstellung |
Geben Sie dann Ihren API-Schlüssel in App.py ein und führen Sie die App aus. Sie wird auf http://localhost:8050 ausgeführt. Weitere Informationen zur Bereitstellung auf einem öffentlich zugänglichen Server (wie AWS) finden Sie in den folgenden Ressourcen:
Um auf diese app zuzugreifen, müssen Sie sicherstellen, dass Sie Python 3.10 oder höher verwenden und die folgenden Bibliotheken installieren:
Python Library | Zweck |
|---|---|
requests | API-Kommunikation mit Bird-Diensten |
dash | UI- und Dashboard-Rendering |
pandas | Datenverarbeitung und Tabellenerstellung |
Geben Sie dann Ihren API-Schlüssel in App.py ein und führen Sie die App aus. Sie wird auf http://localhost:8050 ausgeführt. Weitere Informationen zur Bereitstellung auf einem öffentlich zugänglichen Server (wie AWS) finden Sie in den folgenden Ressourcen:
Erstellen der Dashboard-Seite
Zuerst initialisieren Sie den Datenrahmen und das Dashboard. Ohne Initialisierung des Dashboards erscheint kein Dashboard in der Benutzeroberfläche.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Erstellen Sie dann den ersten Tab. Dies ist eine Kombination aus einem App-Callback (um zu überprüfen, welcher Tab verwendet wird) und einer bedingten Funktion, um zu überprüfen, welcher Tab derzeit ausgewählt ist. Der folgende Code erstellt nur das leere Dashboard und die UI-Elemente (wir kommen später zum Ereignis-Tab). Die dcc-Elemente sind die Dash Core Components und die HTML Components ermöglichen es leicht, HTML in der Benutzeroberfläche zu verwenden.
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)
Beachten Sie mit Dash, wie einfach es ist, eine Dashboard-Benutzeroberfläche mit einem Multi-Select, durchsuchbaren Dropdown zu erstellen. Um Multi-Select oder Suche zu deaktivieren, können die Parameter zur Erstellung eines Dropdowns leicht modifiziert werden. Ich habe festgestellt, dass der komplexeste Teil dieses Projekts darin bestand, den eigentlichen Datenrahmen aus Eingaben zu erstellen und HTML + CSS korrekt in der Benutzeroberfläche zum Laufen zu bringen.
Die Time Series Metrics API ermöglicht es, 33 einzelne Metriken basierend auf einem Datums-/Zeitbereich abzurufen. Sie können tiefer nach Domains, Kampagnen, IP-Pools, Sending Domains, Subaccounts filtern und die Präzision der Zeitreihendaten angeben. Diese zusätzlichen Filter zusammen mit Zustellungsanalysen könnten eine zukünftige Verbesserung dieses Projekts sein (Fehlerbehandlung müsste für Kunden implementiert werden, die keinen Zugriff auf Zustellungsanalysen haben).
Indem ich die Metrics API nutze und aufrufe, erstelle ich ein Dashboard mit den vom Benutzer ausgewählten Parametern und dem angegebenen Zeitraum. Das initialisierte Dashboard wird dann aktualisiert.
Dashboard-Ansicht (Time Series Metrics API)
# 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
Das folgende ist ein Beispiel für mehrere ausgewählte Metriken und einen erweiterten Zeitraum.
Hinweis: Es gibt viele automatisch in das Dash-Diagramm integrierte Elemente (Hover, Zoom, Automatische Skalierung).
Zuerst initialisieren Sie den Datenrahmen und das Dashboard. Ohne Initialisierung des Dashboards erscheint kein Dashboard in der Benutzeroberfläche.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Erstellen Sie dann den ersten Tab. Dies ist eine Kombination aus einem App-Callback (um zu überprüfen, welcher Tab verwendet wird) und einer bedingten Funktion, um zu überprüfen, welcher Tab derzeit ausgewählt ist. Der folgende Code erstellt nur das leere Dashboard und die UI-Elemente (wir kommen später zum Ereignis-Tab). Die dcc-Elemente sind die Dash Core Components und die HTML Components ermöglichen es leicht, HTML in der Benutzeroberfläche zu verwenden.
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)
Beachten Sie mit Dash, wie einfach es ist, eine Dashboard-Benutzeroberfläche mit einem Multi-Select, durchsuchbaren Dropdown zu erstellen. Um Multi-Select oder Suche zu deaktivieren, können die Parameter zur Erstellung eines Dropdowns leicht modifiziert werden. Ich habe festgestellt, dass der komplexeste Teil dieses Projekts darin bestand, den eigentlichen Datenrahmen aus Eingaben zu erstellen und HTML + CSS korrekt in der Benutzeroberfläche zum Laufen zu bringen.
Die Time Series Metrics API ermöglicht es, 33 einzelne Metriken basierend auf einem Datums-/Zeitbereich abzurufen. Sie können tiefer nach Domains, Kampagnen, IP-Pools, Sending Domains, Subaccounts filtern und die Präzision der Zeitreihendaten angeben. Diese zusätzlichen Filter zusammen mit Zustellungsanalysen könnten eine zukünftige Verbesserung dieses Projekts sein (Fehlerbehandlung müsste für Kunden implementiert werden, die keinen Zugriff auf Zustellungsanalysen haben).
Indem ich die Metrics API nutze und aufrufe, erstelle ich ein Dashboard mit den vom Benutzer ausgewählten Parametern und dem angegebenen Zeitraum. Das initialisierte Dashboard wird dann aktualisiert.
Dashboard-Ansicht (Time Series Metrics API)
# 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
Das folgende ist ein Beispiel für mehrere ausgewählte Metriken und einen erweiterten Zeitraum.
Hinweis: Es gibt viele automatisch in das Dash-Diagramm integrierte Elemente (Hover, Zoom, Automatische Skalierung).
Zuerst initialisieren Sie den Datenrahmen und das Dashboard. Ohne Initialisierung des Dashboards erscheint kein Dashboard in der Benutzeroberfläche.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Erstellen Sie dann den ersten Tab. Dies ist eine Kombination aus einem App-Callback (um zu überprüfen, welcher Tab verwendet wird) und einer bedingten Funktion, um zu überprüfen, welcher Tab derzeit ausgewählt ist. Der folgende Code erstellt nur das leere Dashboard und die UI-Elemente (wir kommen später zum Ereignis-Tab). Die dcc-Elemente sind die Dash Core Components und die HTML Components ermöglichen es leicht, HTML in der Benutzeroberfläche zu verwenden.
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)
Beachten Sie mit Dash, wie einfach es ist, eine Dashboard-Benutzeroberfläche mit einem Multi-Select, durchsuchbaren Dropdown zu erstellen. Um Multi-Select oder Suche zu deaktivieren, können die Parameter zur Erstellung eines Dropdowns leicht modifiziert werden. Ich habe festgestellt, dass der komplexeste Teil dieses Projekts darin bestand, den eigentlichen Datenrahmen aus Eingaben zu erstellen und HTML + CSS korrekt in der Benutzeroberfläche zum Laufen zu bringen.
Die Time Series Metrics API ermöglicht es, 33 einzelne Metriken basierend auf einem Datums-/Zeitbereich abzurufen. Sie können tiefer nach Domains, Kampagnen, IP-Pools, Sending Domains, Subaccounts filtern und die Präzision der Zeitreihendaten angeben. Diese zusätzlichen Filter zusammen mit Zustellungsanalysen könnten eine zukünftige Verbesserung dieses Projekts sein (Fehlerbehandlung müsste für Kunden implementiert werden, die keinen Zugriff auf Zustellungsanalysen haben).
Indem ich die Metrics API nutze und aufrufe, erstelle ich ein Dashboard mit den vom Benutzer ausgewählten Parametern und dem angegebenen Zeitraum. Das initialisierte Dashboard wird dann aktualisiert.
Dashboard-Ansicht (Time Series Metrics API)
# 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
Das folgende ist ein Beispiel für mehrere ausgewählte Metriken und einen erweiterten Zeitraum.
Hinweis: Es gibt viele automatisch in das Dash-Diagramm integrierte Elemente (Hover, Zoom, Automatische Skalierung).
Erstellung der Event Details Page
Die Veranstaltungsdetailseite war etwas schwieriger, weil ich nicht wusste, wie ich am besten alle Ereignismetriken auf eine leicht lesbare Weise präsentieren sollte. Ich habe in Erwägung gezogen, dieser Seite Filterparameter hinzuzufügen, jedoch entschied ich, dass dies erhebliche Zeit zu diesem Projekt hinzufügen würde, da die Tabelle dann dynamisch sein müsste (neben der Hinzufügung von Parametern, Rückrufen usw.). Ich entschied mich, alle Ereignisse anzuzeigen und den Zeitstempel zuerst zu platzieren (da ohne den Zeitstempel an erster Stelle die Grafik nicht leicht zu lesen war). Anfangs fand ich, dass allein mit dem rohen HTML die Tabelle unglaublich schwer zu erfassen war. Es gab keine Ränder und keine Farbunterschiede zwischen Header und Zeilen. Um die Tabelle leichter lesbar zu machen, konnte ich CSS innerhalb von Dash verwenden.
Event Details View (Events API)
Die Idee für die Ereignisdetails ist fast dieselbe wie das Dashboard, außer dass ich diesmal die Events API aufrufe und alle Ereignisse heranziehe. Beachten Sie, dass die Ereignisdetails nur die 10 neuesten Ereignisse anzeigen (unter Nutzung des max_rows Parameters und der API-Filterung). Dies kann erhöht werden, jedoch entschied ich mich, die 10 neuesten Ereignisse anzuzeigen, da die API-Anfrage länger dauert, je mehr Ereignisse angezeigt werden. Eine bedeutende Verbesserung wäre die Fähigkeit zur Paginierung und das Einfügen von Next Page / Previous Page in das UI.
Um den Ereignis-Tab (Seite) zu erstellen, rufe ich zuerst die Events API auf und parse die JSON-Antwort in ein Datenframe. Dann sortiere und ordne ich das Datenframe neu, um den Zeitstempel als die erste Spalte zu setzen. Schließlich baue ich die HTML-Tabelle auf, indem ich durch das Datenframe iteriere.
# 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)) ]) ]) ])
So sieht das im UI aus.
Die Veranstaltungsdetailseite war etwas schwieriger, weil ich nicht wusste, wie ich am besten alle Ereignismetriken auf eine leicht lesbare Weise präsentieren sollte. Ich habe in Erwägung gezogen, dieser Seite Filterparameter hinzuzufügen, jedoch entschied ich, dass dies erhebliche Zeit zu diesem Projekt hinzufügen würde, da die Tabelle dann dynamisch sein müsste (neben der Hinzufügung von Parametern, Rückrufen usw.). Ich entschied mich, alle Ereignisse anzuzeigen und den Zeitstempel zuerst zu platzieren (da ohne den Zeitstempel an erster Stelle die Grafik nicht leicht zu lesen war). Anfangs fand ich, dass allein mit dem rohen HTML die Tabelle unglaublich schwer zu erfassen war. Es gab keine Ränder und keine Farbunterschiede zwischen Header und Zeilen. Um die Tabelle leichter lesbar zu machen, konnte ich CSS innerhalb von Dash verwenden.
Event Details View (Events API)
Die Idee für die Ereignisdetails ist fast dieselbe wie das Dashboard, außer dass ich diesmal die Events API aufrufe und alle Ereignisse heranziehe. Beachten Sie, dass die Ereignisdetails nur die 10 neuesten Ereignisse anzeigen (unter Nutzung des max_rows Parameters und der API-Filterung). Dies kann erhöht werden, jedoch entschied ich mich, die 10 neuesten Ereignisse anzuzeigen, da die API-Anfrage länger dauert, je mehr Ereignisse angezeigt werden. Eine bedeutende Verbesserung wäre die Fähigkeit zur Paginierung und das Einfügen von Next Page / Previous Page in das UI.
Um den Ereignis-Tab (Seite) zu erstellen, rufe ich zuerst die Events API auf und parse die JSON-Antwort in ein Datenframe. Dann sortiere und ordne ich das Datenframe neu, um den Zeitstempel als die erste Spalte zu setzen. Schließlich baue ich die HTML-Tabelle auf, indem ich durch das Datenframe iteriere.
# 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)) ]) ]) ])
So sieht das im UI aus.
Die Veranstaltungsdetailseite war etwas schwieriger, weil ich nicht wusste, wie ich am besten alle Ereignismetriken auf eine leicht lesbare Weise präsentieren sollte. Ich habe in Erwägung gezogen, dieser Seite Filterparameter hinzuzufügen, jedoch entschied ich, dass dies erhebliche Zeit zu diesem Projekt hinzufügen würde, da die Tabelle dann dynamisch sein müsste (neben der Hinzufügung von Parametern, Rückrufen usw.). Ich entschied mich, alle Ereignisse anzuzeigen und den Zeitstempel zuerst zu platzieren (da ohne den Zeitstempel an erster Stelle die Grafik nicht leicht zu lesen war). Anfangs fand ich, dass allein mit dem rohen HTML die Tabelle unglaublich schwer zu erfassen war. Es gab keine Ränder und keine Farbunterschiede zwischen Header und Zeilen. Um die Tabelle leichter lesbar zu machen, konnte ich CSS innerhalb von Dash verwenden.
Event Details View (Events API)
Die Idee für die Ereignisdetails ist fast dieselbe wie das Dashboard, außer dass ich diesmal die Events API aufrufe und alle Ereignisse heranziehe. Beachten Sie, dass die Ereignisdetails nur die 10 neuesten Ereignisse anzeigen (unter Nutzung des max_rows Parameters und der API-Filterung). Dies kann erhöht werden, jedoch entschied ich mich, die 10 neuesten Ereignisse anzuzeigen, da die API-Anfrage länger dauert, je mehr Ereignisse angezeigt werden. Eine bedeutende Verbesserung wäre die Fähigkeit zur Paginierung und das Einfügen von Next Page / Previous Page in das UI.
Um den Ereignis-Tab (Seite) zu erstellen, rufe ich zuerst die Events API auf und parse die JSON-Antwort in ein Datenframe. Dann sortiere und ordne ich das Datenframe neu, um den Zeitstempel als die erste Spalte zu setzen. Schließlich baue ich die HTML-Tabelle auf, indem ich durch das Datenframe iteriere.
# 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)) ]) ]) ])
So sieht das im UI aus.
Nächste Schritte
Für jemanden, der sein eigenes Dashboard oder Ereignisprotokoll erstellen möchte, ist dies ein guter Anfang. Mit der Anpassungsfähigkeit hier sind dem Himmel keine Grenzen gesetzt.
Wie oben besprochen, könnten einige zukünftige Verbesserungen sein:
Hinzufügen von Zustellbarkeitsanalysen zum Dashboard
Hinzufügen weiterer Filter zum Dashboard
Optionen für mögliches Caching, damit die API nicht jedes Mal aufgerufen wird, um die Seiten anzuzeigen
UI-Verbesserungen
Hinzufügen von Filtern und Paginierung zur Detailseite der Ereignisse
Ich wäre an Feedback oder Vorschlägen zur Erweiterung dieses Projekts interessiert.
~ Zach Samuels, Bird Senior Solutions Engineer
Für jemanden, der sein eigenes Dashboard oder Ereignisprotokoll erstellen möchte, ist dies ein guter Anfang. Mit der Anpassungsfähigkeit hier sind dem Himmel keine Grenzen gesetzt.
Wie oben besprochen, könnten einige zukünftige Verbesserungen sein:
Hinzufügen von Zustellbarkeitsanalysen zum Dashboard
Hinzufügen weiterer Filter zum Dashboard
Optionen für mögliches Caching, damit die API nicht jedes Mal aufgerufen wird, um die Seiten anzuzeigen
UI-Verbesserungen
Hinzufügen von Filtern und Paginierung zur Detailseite der Ereignisse
Ich wäre an Feedback oder Vorschlägen zur Erweiterung dieses Projekts interessiert.
~ Zach Samuels, Bird Senior Solutions Engineer
Für jemanden, der sein eigenes Dashboard oder Ereignisprotokoll erstellen möchte, ist dies ein guter Anfang. Mit der Anpassungsfähigkeit hier sind dem Himmel keine Grenzen gesetzt.
Wie oben besprochen, könnten einige zukünftige Verbesserungen sein:
Hinzufügen von Zustellbarkeitsanalysen zum Dashboard
Hinzufügen weiterer Filter zum Dashboard
Optionen für mögliches Caching, damit die API nicht jedes Mal aufgerufen wird, um die Seiten anzuzeigen
UI-Verbesserungen
Hinzufügen von Filtern und Paginierung zur Detailseite der Ereignisse
Ich wäre an Feedback oder Vorschlägen zur Erweiterung dieses Projekts interessiert.
~ Zach Samuels, Bird Senior Solutions Engineer
