Ein Dashboarding-Tool mit Bird APIs

E-Mail

·

Ein Dashboarding-Tool mit Bird APIs

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.

Erste Schritte

Um auf diese App zuzugreifen, müssen Sie sicherstellen, dass Sie Python 3.10 oder neuer ausführen und die folgenden Bibliotheken installieren:

Python-Bibliothek

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 unter http://localhost:8050 laufen. Für weitere Informationen zum Bereitstellen auf einem öffentlich zugänglichen Server (wie AWS), siehe die folgenden Ressourcen:

Erstellen der Dashboard Page

Zuerst initialisieren Sie den Dataframe und das Dashboard. Ohne 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 bauen Sie den ersten Tab aus. Dies ist eine Kombination eines App-Callbacks (um zu prüfen, welcher Tab verwendet wird) sowie einer bedingten Funktion, um zu überprüfen, welcher Tab aktuell ausgewählt ist. Der folgende Code baut nur das leere Dashboard und die UI-Elemente auf (wir kommen später zum Events-Tab). Die dcc-Elemente sind die Dash Core Components und die HTML Components ermöglichen es, HTML einfach im UI 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, wie einfach es ist, mit Dash eine Dashboard-UI mit einem Multi-Select-Suchdropdown zu erstellen. Um Multi-Select oder Suche zu deaktivieren, können die Parameter für die Erstellung eines Dropdowns leicht modifiziert werden. Ich fand, dass der komplexeste Teil dieses Projekts darin bestand, den eigentlichen Dataframe aus Eingaben zu erstellen und HTML + CSS korrekt im UI funktionieren zu lassen.

Die Time Series Metrics API ermöglicht es, 33 individuelle Metriken basierend auf einem Datums-/Zeitbereich abzurufen. Sie können tiefer nach Domänen, Kampagnen, IP-Pools, sendenden Domänen, Unterkonten filtern und die Präzision der Zeitreihendaten angeben. Diese zusätzlichen Filter zusammen mit der Zustellbarkeitsanalyse könnten eine zukünftige Verbesserung dieses Projekts sein (Fehlerabfang muss für Kunden implementiert werden, die keinen Zugriff auf die Zustellbarkeitsanalyse haben).

Durch die Nutzung und den Aufruf der Metrics API baue ich ein Dashboard mit den vom Benutzer ausgewählten Parametern und dem angegebenen Zeitrahmen. 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.


Sparkpost analytics dashboard

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

Zuerst initialisieren Sie den Dataframe und das Dashboard. Ohne 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 bauen Sie den ersten Tab aus. Dies ist eine Kombination eines App-Callbacks (um zu prüfen, welcher Tab verwendet wird) sowie einer bedingten Funktion, um zu überprüfen, welcher Tab aktuell ausgewählt ist. Der folgende Code baut nur das leere Dashboard und die UI-Elemente auf (wir kommen später zum Events-Tab). Die dcc-Elemente sind die Dash Core Components und die HTML Components ermöglichen es, HTML einfach im UI 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, wie einfach es ist, mit Dash eine Dashboard-UI mit einem Multi-Select-Suchdropdown zu erstellen. Um Multi-Select oder Suche zu deaktivieren, können die Parameter für die Erstellung eines Dropdowns leicht modifiziert werden. Ich fand, dass der komplexeste Teil dieses Projekts darin bestand, den eigentlichen Dataframe aus Eingaben zu erstellen und HTML + CSS korrekt im UI funktionieren zu lassen.

Die Time Series Metrics API ermöglicht es, 33 individuelle Metriken basierend auf einem Datums-/Zeitbereich abzurufen. Sie können tiefer nach Domänen, Kampagnen, IP-Pools, sendenden Domänen, Unterkonten filtern und die Präzision der Zeitreihendaten angeben. Diese zusätzlichen Filter zusammen mit der Zustellbarkeitsanalyse könnten eine zukünftige Verbesserung dieses Projekts sein (Fehlerabfang muss für Kunden implementiert werden, die keinen Zugriff auf die Zustellbarkeitsanalyse haben).

Durch die Nutzung und den Aufruf der Metrics API baue ich ein Dashboard mit den vom Benutzer ausgewählten Parametern und dem angegebenen Zeitrahmen. 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.


Sparkpost analytics dashboard

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

Zuerst initialisieren Sie den Dataframe und das Dashboard. Ohne 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 bauen Sie den ersten Tab aus. Dies ist eine Kombination eines App-Callbacks (um zu prüfen, welcher Tab verwendet wird) sowie einer bedingten Funktion, um zu überprüfen, welcher Tab aktuell ausgewählt ist. Der folgende Code baut nur das leere Dashboard und die UI-Elemente auf (wir kommen später zum Events-Tab). Die dcc-Elemente sind die Dash Core Components und die HTML Components ermöglichen es, HTML einfach im UI 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, wie einfach es ist, mit Dash eine Dashboard-UI mit einem Multi-Select-Suchdropdown zu erstellen. Um Multi-Select oder Suche zu deaktivieren, können die Parameter für die Erstellung eines Dropdowns leicht modifiziert werden. Ich fand, dass der komplexeste Teil dieses Projekts darin bestand, den eigentlichen Dataframe aus Eingaben zu erstellen und HTML + CSS korrekt im UI funktionieren zu lassen.

Die Time Series Metrics API ermöglicht es, 33 individuelle Metriken basierend auf einem Datums-/Zeitbereich abzurufen. Sie können tiefer nach Domänen, Kampagnen, IP-Pools, sendenden Domänen, Unterkonten filtern und die Präzision der Zeitreihendaten angeben. Diese zusätzlichen Filter zusammen mit der Zustellbarkeitsanalyse könnten eine zukünftige Verbesserung dieses Projekts sein (Fehlerabfang muss für Kunden implementiert werden, die keinen Zugriff auf die Zustellbarkeitsanalyse haben).

Durch die Nutzung und den Aufruf der Metrics API baue ich ein Dashboard mit den vom Benutzer ausgewählten Parametern und dem angegebenen Zeitrahmen. 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.


Sparkpost analytics dashboard

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

Creating the Event Details Seite

Die Seite mit den Veranstaltungsdetails war etwas schwieriger, weil ich nicht wusste, wie ich alle Ereignismetriken so präsentieren konnte, dass sie leicht zu lesen sind. Ich habe überlegt, dieser Seite Filterparameter hinzuzufügen, jedoch entschied ich, dass dies eine erhebliche Menge an Zeit zu diesem Projekt hinzufügen würde, da die Tabelle dann dynamisch sein müsste (neben den Parametern, Rückrufen usw.). Ich habe mich entschieden, alle Ereignisse zu zeigen und den Zeitstempel zuerst zu platzieren (da das Diagramm ohne den Zeitstempel zuerst nicht leicht zu lesen war). Anfangs fand ich, dass die Tabelle mit nur dem rohen HTML unglaublich schwer zu lesen war. Es gab keine Ränder und keine Farbunterschiede zwischen Überschrift und Zeilen. Um die Tabelle leichter lesbar zu machen, konnte ich CSS innerhalb von Dash verwenden.

Veranstaltungsdetailansicht (Events API)

Die Idee für die Veranstaltungsdetails ähnelt fast dem Dashboard, außer dass ich diesmal die Events API aufrufe und alle Ereignisse einbringe. Beachten Sie, dass die Ereignisdetails nur die 10 jüngsten Ereignisse zeigen (unter Verwendung des max_rows-Parameters und der API-Filterung). Dies kann erhöht werden, jedoch habe ich mich entschieden, die 10 jüngsten Ereignisse anzuzeigen, weil je mehr Ereignisse angezeigt werden, desto länger dauert der API-Aufruf. Eine bedeutende Verbesserung wäre die Möglichkeit, zu paginieren und in der Benutzeroberfläche eine „Nächste Seite / Vorherige Seite“ einzuschließen.

Um die Registerkarte Ereignisse (Seite) zu erstellen, rufe ich zuerst 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 setzen. Schließlich erstelle ich die HTML-Tabelle, indem ich den Datenrahmen durchgehe.

# 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 in der Benutzeroberfläche aus.

Sparkpost event details

Die Seite mit den Veranstaltungsdetails war etwas schwieriger, weil ich nicht wusste, wie ich alle Ereignismetriken so präsentieren konnte, dass sie leicht zu lesen sind. Ich habe überlegt, dieser Seite Filterparameter hinzuzufügen, jedoch entschied ich, dass dies eine erhebliche Menge an Zeit zu diesem Projekt hinzufügen würde, da die Tabelle dann dynamisch sein müsste (neben den Parametern, Rückrufen usw.). Ich habe mich entschieden, alle Ereignisse zu zeigen und den Zeitstempel zuerst zu platzieren (da das Diagramm ohne den Zeitstempel zuerst nicht leicht zu lesen war). Anfangs fand ich, dass die Tabelle mit nur dem rohen HTML unglaublich schwer zu lesen war. Es gab keine Ränder und keine Farbunterschiede zwischen Überschrift und Zeilen. Um die Tabelle leichter lesbar zu machen, konnte ich CSS innerhalb von Dash verwenden.

Veranstaltungsdetailansicht (Events API)

Die Idee für die Veranstaltungsdetails ähnelt fast dem Dashboard, außer dass ich diesmal die Events API aufrufe und alle Ereignisse einbringe. Beachten Sie, dass die Ereignisdetails nur die 10 jüngsten Ereignisse zeigen (unter Verwendung des max_rows-Parameters und der API-Filterung). Dies kann erhöht werden, jedoch habe ich mich entschieden, die 10 jüngsten Ereignisse anzuzeigen, weil je mehr Ereignisse angezeigt werden, desto länger dauert der API-Aufruf. Eine bedeutende Verbesserung wäre die Möglichkeit, zu paginieren und in der Benutzeroberfläche eine „Nächste Seite / Vorherige Seite“ einzuschließen.

Um die Registerkarte Ereignisse (Seite) zu erstellen, rufe ich zuerst 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 setzen. Schließlich erstelle ich die HTML-Tabelle, indem ich den Datenrahmen durchgehe.

# 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 in der Benutzeroberfläche aus.

Sparkpost event details

Die Seite mit den Veranstaltungsdetails war etwas schwieriger, weil ich nicht wusste, wie ich alle Ereignismetriken so präsentieren konnte, dass sie leicht zu lesen sind. Ich habe überlegt, dieser Seite Filterparameter hinzuzufügen, jedoch entschied ich, dass dies eine erhebliche Menge an Zeit zu diesem Projekt hinzufügen würde, da die Tabelle dann dynamisch sein müsste (neben den Parametern, Rückrufen usw.). Ich habe mich entschieden, alle Ereignisse zu zeigen und den Zeitstempel zuerst zu platzieren (da das Diagramm ohne den Zeitstempel zuerst nicht leicht zu lesen war). Anfangs fand ich, dass die Tabelle mit nur dem rohen HTML unglaublich schwer zu lesen war. Es gab keine Ränder und keine Farbunterschiede zwischen Überschrift und Zeilen. Um die Tabelle leichter lesbar zu machen, konnte ich CSS innerhalb von Dash verwenden.

Veranstaltungsdetailansicht (Events API)

Die Idee für die Veranstaltungsdetails ähnelt fast dem Dashboard, außer dass ich diesmal die Events API aufrufe und alle Ereignisse einbringe. Beachten Sie, dass die Ereignisdetails nur die 10 jüngsten Ereignisse zeigen (unter Verwendung des max_rows-Parameters und der API-Filterung). Dies kann erhöht werden, jedoch habe ich mich entschieden, die 10 jüngsten Ereignisse anzuzeigen, weil je mehr Ereignisse angezeigt werden, desto länger dauert der API-Aufruf. Eine bedeutende Verbesserung wäre die Möglichkeit, zu paginieren und in der Benutzeroberfläche eine „Nächste Seite / Vorherige Seite“ einzuschließen.

Um die Registerkarte Ereignisse (Seite) zu erstellen, rufe ich zuerst 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 setzen. Schließlich erstelle ich die HTML-Tabelle, indem ich den Datenrahmen durchgehe.

# 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 in der Benutzeroberfläche aus.

Sparkpost event details

Nächste Schritte

Für jemanden, der sein eigenes Dashboard oder Ereignisprotokoll erstellen möchte, ist dies ein guter Anfang. Mit den Anpassungsmöglichkeiten hier ist der Himmel die Grenze.

Wie oben besprochen, könnten einige zukünftige Verbesserungen wie folgt aussehen:

  • Hinzufügen von Zustellungsanalysen zum Dashboard

  • Hinzufügen weiterer Filter zum Dashboard

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

  • UI-Verbesserungen

  • Hinzufügen von Filter- und Paginierungsmöglichkeiten zur Detailseite des Ereignisses

Ich wäre an jedem Feedback oder Vorschlägen zur Erweiterung dieses Projekts interessiert.

~ Zach Samuels, Bird Senior Solutions Engineer

Andere Nachrichten

Mehr erfahren aus dieser Kategorie

Email

·

Entwicklung eines Bulk-Asynchronen Vogel-Empfänger-Validierungstools

Erste Schritte mit CppUTest

Plattform & Infrastruktur

·

Verwendung von Bird-Produkten kombiniert

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

Die komplette AI-native Plattform, die mit Ihrem Business skalierbar ist.

Kontaktieren Sie den Vertrieb

Kostenlos starten

© 2026 Bird

Support kontaktieren

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

Die komplette AI-native Plattform, die mit Ihrem Business skalierbar ist.

Kontaktieren Sie den Vertrieb

Kostenlos starten

© 2026 Bird

Support kontaktieren

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

Die komplette AI-native Plattform, die mit Ihrem Business skalierbar ist.

Kontaktieren Sie den Vertrieb

Kostenlos starten

© 2026 Bird

Support kontaktieren