Erreichen

Grow

Manage

Automate

Erreichen

Grow

Manage

Automate

Ein Dashboarding-Tool mit Bird APIs

Zachary Samuels

24.03.2022

E-Mail

1 min read

Ein Dashboarding-Tool mit Bird APIs

Zachary Samuels

24.03.2022

E-Mail

1 min read

Ein Dashboarding-Tool mit Bird APIs

Dieses Skript kratzt nur an der Oberfläche dessen, was mit Python, Plotly Dash und unseren APIs möglich ist.

Vor fast einem Jahr entwickelte Tom Mairs, Birds Direktor für Kundenerfolg, ein Mailer-Tool unter Verwendung von Bird APIs. In diesem Beitrag setze ich fort, wo er aufgehört hat. Sein Tool ermöglicht die zeitgesteuerte Übermittlung von Jobs, aber was, 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, ohne den Benutzern vollen Zugriff auf die Bird UI zu geben. Dieses Skript berührt nur die Oberfläche dessen, was mit Python, Plotly Dash und unseren APIs möglich ist. Bei der Erstellung von Dashboards, die hochvolumige API-Daten verarbeiten, sollten Sie beachten, dass Infrastrukturelemente wie DNS Engpässe werden können – wir haben AWS DNS-Skalierungsprobleme 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-gestützte Automatisierungen in Ihre Datenverarbeitungspipelines einzuführen.

Als ich mit meiner Suche online begann, wollte ich den Weg des geringsten Widerstands finden. Ich hätte alle Dashboards und UIs selbst in HTML und Python erstellen können, doch nach einiger Google-Suche stieß ich auf Plotly’s Dash, das sich leicht in Python integrieren lässt. Ich habe Dash aus zwei Gründen gewählt: 1) es ist Open Source und 2) nach dem Lesen der Dokumentation schien es leicht anpassbar für das, was ich erreichen wollte. Dash ist eine Open-Source-Bibliothek, die ideal ist zum Erstellen und Bereitstellen von Daten-Apps mit benutzerdefinierten Benutzeroberflächen. Dies machte die Erstellung einer UI extrem einfach. Die Frage war dann, wie komplex ich diese App gestalten wollte? Je mehr Zeit ich investierte, desto mehr Funktionen wollte ich hinzufügen.

Für das erste Projekt wollte ich sicherstellen, dass ich ein Dashboard mit anpassbaren Metriken und einem wählbaren Zeitrahmen hatte. Zunächst begann ich mit einem Dashboard, bei dem man nur eine Metrik aus dem Dropdown-Menü auswählen konnte. Als ich dann Feedback von Kollegen erhielt, verfeinerte ich das Dashboard ein wenig, um eine Mehrfachauswahl und Achsentitel hinzuzufügen. Ich entschied mich auch, einen zusätzlichen Tab für ein Ereignisprotokoll hinzuzufügen. Ich kam an den Punkt, an dem ich mit dem zufrieden war, was ich als guten Ausgangspunkt für jeden hielt, der seine eigenen Dashboards entwickeln möchte. Für Entwickler, die Echtzeit-Webhook-Daten in ihre Dashboards einspeisen möchten, schauen Sie sich unseren Leitfaden zum Erstellen von Webhook-Konsumenten mit Azure Functions an. 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:

  • requests

  • dash

  • pandas

Geben Sie dann Ihren API-Schlüssel in App.py ein und führen Sie die App aus. Sie wird auf http://localhost:8050 laufen. Für weitere Informationen zur Bereitstellung auf einem öffentlich zugänglichen Server (wie z.B. AWS) siehe die folgenden Ressourcen:

Erstellen der Dashboard-Seite

Zuerst initialisieren Sie den Datenrahmen und das Dashboard. Ohne die Initialisierung des Dashboards wird im UI kein Dashboard angezeigt.

df = pd.DataFrame({

"Count": [0,0],

"Time": [0,0]

})

fig = px.line(df,x="Time",y="Count")

Dann erstellen Sie 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 prüfen, welcher Tab derzeit ausgewählt ist. Der folgende Code erstellt nur das leere Dashboard und die UI-Elemente (wir werden später zum Ereignis-Tab kommen). Die dcc-Elemente sind die Dash Core Components und die HTML Components ermöglichen es, HTML einfach im UI zu nutzen.

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)"),

#Datumsauswahl (maximal zulässiges Datum ist auf das heutige Datum gesetzt) 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), ),

#Grafikobjekt dcc.Graph( id='Emails', figure=fig )

Beachten Sie bei Dash, wie einfach es ist, eine Dashboard-UI mit einem Multi-Select, durchsuchbaren Dropdown zu erstellen. Um Multi-Select oder die Suche zu deaktivieren, können die Parameter zur Erstellung eines Dropdowns leicht modifiziert werden. Ich fand, dass der komplexeste Teil dieses Projekts darin bestand, den tatsächlichen Datenrahmen aus Eingaben zu erstellen sowie das HTML + CSS korrekt im UI zum Laufen zu bringen.

Die Time Series Metrics API ermöglicht das Abrufen von 33 individuellen Metriken basierend auf einem Datums-/Zeitbereich. Sie können tiefer nach Domains, Kampagnen, IP-Pools, sendenden Domains, Unterkonten filtern und die Präzision der zeitlichen Daten angeben. Diese zusätzlichen Filter zusammen mit Analysen zur Zustellbarkeit könnten eine zukünftige Verbesserung dieses Projekts darstellen (Fehlererkennung müsste für Klienten implementiert werden, die keinen Zugang zu Zustellbarkeitsanalysen haben).

Durch die Nutzung und den Aufruf der Metrics API habe ich ein Dashboard mit den vom Benutzer ausgewählten Parametern und dem angegebenen Zeitrahmen erstellt. Das initialisierte Dashboard wird dann aktualisiert.

#Erstellen des API-Aufrufs unter Nutzung der angegebenen Parameter 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(",") #Erstellen eines neuen Dashboards unter Nutzung der neuen Metriken und Daten aus dem aktualisierten API-Aufruf 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

Im Folgenden ein Beispiel für mehrere ausgewählte Metriken und einen erweiterten Zeitrahmen.


Sparkpost analytics dashboard

Hinweis: Es gibt viele Elemente, die automatisch in das Dash-Diagramm eingebaut sind (Hover, Zoom, Autoskalierung).

Zuerst initialisieren Sie den Datenrahmen und das Dashboard. Ohne die Initialisierung des Dashboards wird im UI kein Dashboard angezeigt.

df = pd.DataFrame({

"Count": [0,0],

"Time": [0,0]

})

fig = px.line(df,x="Time",y="Count")

Dann erstellen Sie 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 prüfen, welcher Tab derzeit ausgewählt ist. Der folgende Code erstellt nur das leere Dashboard und die UI-Elemente (wir werden später zum Ereignis-Tab kommen). Die dcc-Elemente sind die Dash Core Components und die HTML Components ermöglichen es, HTML einfach im UI zu nutzen.

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)"),

#Datumsauswahl (maximal zulässiges Datum ist auf das heutige Datum gesetzt) 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), ),

#Grafikobjekt dcc.Graph( id='Emails', figure=fig )

Beachten Sie bei Dash, wie einfach es ist, eine Dashboard-UI mit einem Multi-Select, durchsuchbaren Dropdown zu erstellen. Um Multi-Select oder die Suche zu deaktivieren, können die Parameter zur Erstellung eines Dropdowns leicht modifiziert werden. Ich fand, dass der komplexeste Teil dieses Projekts darin bestand, den tatsächlichen Datenrahmen aus Eingaben zu erstellen sowie das HTML + CSS korrekt im UI zum Laufen zu bringen.

Die Time Series Metrics API ermöglicht das Abrufen von 33 individuellen Metriken basierend auf einem Datums-/Zeitbereich. Sie können tiefer nach Domains, Kampagnen, IP-Pools, sendenden Domains, Unterkonten filtern und die Präzision der zeitlichen Daten angeben. Diese zusätzlichen Filter zusammen mit Analysen zur Zustellbarkeit könnten eine zukünftige Verbesserung dieses Projekts darstellen (Fehlererkennung müsste für Klienten implementiert werden, die keinen Zugang zu Zustellbarkeitsanalysen haben).

Durch die Nutzung und den Aufruf der Metrics API habe ich ein Dashboard mit den vom Benutzer ausgewählten Parametern und dem angegebenen Zeitrahmen erstellt. Das initialisierte Dashboard wird dann aktualisiert.

#Erstellen des API-Aufrufs unter Nutzung der angegebenen Parameter 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(",") #Erstellen eines neuen Dashboards unter Nutzung der neuen Metriken und Daten aus dem aktualisierten API-Aufruf 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

Im Folgenden ein Beispiel für mehrere ausgewählte Metriken und einen erweiterten Zeitrahmen.


Sparkpost analytics dashboard

Hinweis: Es gibt viele Elemente, die automatisch in das Dash-Diagramm eingebaut sind (Hover, Zoom, Autoskalierung).

Zuerst initialisieren Sie den Datenrahmen und das Dashboard. Ohne die Initialisierung des Dashboards wird im UI kein Dashboard angezeigt.

df = pd.DataFrame({

"Count": [0,0],

"Time": [0,0]

})

fig = px.line(df,x="Time",y="Count")

Dann erstellen Sie 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 prüfen, welcher Tab derzeit ausgewählt ist. Der folgende Code erstellt nur das leere Dashboard und die UI-Elemente (wir werden später zum Ereignis-Tab kommen). Die dcc-Elemente sind die Dash Core Components und die HTML Components ermöglichen es, HTML einfach im UI zu nutzen.

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)"),

#Datumsauswahl (maximal zulässiges Datum ist auf das heutige Datum gesetzt) 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), ),

#Grafikobjekt dcc.Graph( id='Emails', figure=fig )

Beachten Sie bei Dash, wie einfach es ist, eine Dashboard-UI mit einem Multi-Select, durchsuchbaren Dropdown zu erstellen. Um Multi-Select oder die Suche zu deaktivieren, können die Parameter zur Erstellung eines Dropdowns leicht modifiziert werden. Ich fand, dass der komplexeste Teil dieses Projekts darin bestand, den tatsächlichen Datenrahmen aus Eingaben zu erstellen sowie das HTML + CSS korrekt im UI zum Laufen zu bringen.

Die Time Series Metrics API ermöglicht das Abrufen von 33 individuellen Metriken basierend auf einem Datums-/Zeitbereich. Sie können tiefer nach Domains, Kampagnen, IP-Pools, sendenden Domains, Unterkonten filtern und die Präzision der zeitlichen Daten angeben. Diese zusätzlichen Filter zusammen mit Analysen zur Zustellbarkeit könnten eine zukünftige Verbesserung dieses Projekts darstellen (Fehlererkennung müsste für Klienten implementiert werden, die keinen Zugang zu Zustellbarkeitsanalysen haben).

Durch die Nutzung und den Aufruf der Metrics API habe ich ein Dashboard mit den vom Benutzer ausgewählten Parametern und dem angegebenen Zeitrahmen erstellt. Das initialisierte Dashboard wird dann aktualisiert.

#Erstellen des API-Aufrufs unter Nutzung der angegebenen Parameter 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(",") #Erstellen eines neuen Dashboards unter Nutzung der neuen Metriken und Daten aus dem aktualisierten API-Aufruf 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

Im Folgenden ein Beispiel für mehrere ausgewählte Metriken und einen erweiterten Zeitrahmen.


Sparkpost analytics dashboard

Hinweis: Es gibt viele Elemente, die automatisch in das Dash-Diagramm eingebaut sind (Hover, Zoom, Autoskalierung).

Erstellung der Event Details Page

Die Veranstaltungsdetailseite war etwas schwieriger, da ich nicht wusste, wie ich alle Veranstaltungsmetriken am besten in einer leicht lesbaren Weise präsentieren sollte. Ich erwog, dieser Seite Filterparameter hinzuzufügen, entschied mich jedoch dagegen, da dies diesem Projekt erheblich mehr Zeit kosten würde, da dann die Tabelle dynamisch sein müsste (zusätzlich zu den Parametern, Rückrufen usw.). Ich entschied mich schließlich dafür, alle Ereignisse anzuzeigen und den Zeitstempel zuerst zu platzieren (da ohne den Zeitstempel zuerst zu setzen, die Tabelle nicht leicht zu lesen war). Zunächst stellte ich fest, dass die Tabelle mit nur dem rohen HTML unglaublich schwer zu lesen war. Es gab keine Rahmen und keine Farbunterschiede zwischen Kopfzeile und Zeilen. Um die Tabelle leichter lesbar zu machen, konnte ich CSS innerhalb von Dash verwenden.

Die Idee für die Veranstaltungsdetails ist fast die gleiche wie beim Dashboard, außer dass ich diesmal die Events API aufrufe und alle Ereignisse einbringe. Beachten Sie, dass die Veranstaltungsdetails nur die 10 neuesten Ereignisse anzeigen (mithilfe des max_rows-Parameters und der API-Filterung). Dies kann erhöht werden, ich entschied mich jedoch, die 10 neuesten Ereignisse anzuzeigen, da je mehr Ereignisse angezeigt werden, desto länger dauert der API-Aufruf. Eine bedeutende Verbesserung könnte die Möglichkeit sein zu paginieren und im UI eine Nächste Seite / Vorherige Seite einzufügen.

Um die Veranstaltungstab (Seite) aufzubauen, rufe ich zunächst die Events API auf und parse die JSON-Antwort in einen Datenrahmen. Dann sortiere und ordne ich den Datenrahmen neu, um den Zeitstempel als erste Spalte zu platzieren. Schließlich baue ich die HTML-Tabelle auf, indem ich den Datenrahmen durchlaufe.

#Erstellen und Aufrufen der 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 = BASE_URL + "/events/message" 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']) max_rows=10 #Maximale Anzahl der in der Ereignistabelle angezeigten Ergebnisse #Platziere Zeitstempel als erste Spalte in der Tabelle 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]] #Zeige das neue HTML mit der Ereignistabelle an (beachten Sie, dass diese Tabelle auch table.css referenziert) 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 es in der Benutzeroberfläche aus.

Sparkpost event details

Nächste Schritte

Für jemanden, der ein eigenes Dashboard oder ein Ereignisprotokoll erstellen möchte, ist dies ein guter Anfang. Mit den Anpassungsmöglichkeiten hier sind keine Grenzen gesetzt.

Wie oben besprochen, könnten einige zukünftige Verbesserungen sein:

  • Hinzugefügt von Zustellbarkeitsanalysen zum Dashboard

  • Weitere Filter dem Dashboard hinzufügen

  • Eventuelle Caching-Optionen, damit die API nicht jedes Mal aufgerufen wird, um die Seiten anzuzeigen

  • UI-Verbesserungen

  • Filtern und Paginieren der Ereignisseite hinzufügen

Ich wäre daran interessiert, Feedback zu hören oder Vorschläge zur Erweiterung dieses Projekts zu erhalten.

~ Zach Samuels, Bird Senior Solutions Engineer

Lassen Sie uns Sie mit einem Bird-Experten verbinden.
Erleben Sie die volle Macht des Bird in 30 Minuten.

Durch die Übermittlung stimmen Sie zu, dass Bird Sie bezüglich unserer Produkte und Dienstleistungen kontaktieren darf.

Sie können sich jederzeit abmelden. Weitere Informationen zur Datenverarbeitung finden Sie in Birds Datenschutzerklärung.

Unternehmen

Newsletter

Bleiben Sie mit Bird auf dem Laufenden durch wöchentliche Updates in Ihrem Posteingang.

Lassen Sie uns Sie mit einem Bird-Experten verbinden.
Erleben Sie die volle Macht des Bird in 30 Minuten.

Durch die Übermittlung stimmen Sie zu, dass Bird Sie bezüglich unserer Produkte und Dienstleistungen kontaktieren darf.

Sie können sich jederzeit abmelden. Weitere Informationen zur Datenverarbeitung finden Sie in Birds Datenschutzerklärung.

Unternehmen

Newsletter

Bleiben Sie mit Bird auf dem Laufenden durch wöchentliche Updates in Ihrem Posteingang.

Lassen Sie uns Sie mit einem Bird-Experten verbinden.
Erleben Sie die volle Macht des Bird in 30 Minuten.

Durch die Übermittlung stimmen Sie zu, dass Bird Sie bezüglich unserer Produkte und Dienstleistungen kontaktieren darf.

Sie können sich jederzeit abmelden. Weitere Informationen zur Datenverarbeitung finden Sie in Birds Datenschutzerklärung.

R

Erreichen

G

Grow

M

Manage

A

Automate

Unternehmen

Newsletter

Bleiben Sie mit Bird auf dem Laufenden durch wöchentliche Updates in Ihrem Posteingang.