Erreichen

Grow

Manage

Automate

Einloggen

Demo buchen

Erreichen

Grow

Manage

Automate

Einloggen

Demo buchen

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

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

Einführung

Erste Schritte

Erstellen der Dashboard-Seite

Erstellung der Event Details Page

Nächste Schritte

Business in a box.

Entdecken Sie unsere Lösungen.

Vor fast einem Jahr schrieb Tom Mairs, Birds Direktor für Kundenerfolg, ein Mailer-Tool unter Verwendung von Bird APIs. In diesem Beitrag setze ich dort an, wo er aufgehört hat. Sein Tool ermöglicht die zeitgesteuerte Übertragung von Jobs, aber was, wenn wir unsere eigenen Dashboards und Ereignisprotokolle erstellen möchten?

Vielleicht möchte ich ein spezifisches Dashboard für eine Geschäftsgruppe oder ein kundenorientiertes Dashboard erstellen, jedoch den Benutzern nicht den vollständigen Zugriff auf die Bird UI gewähren. Dieses Script kratzt nur an der Oberfläche dessen, was mit der Nutzung von Python, Plotly Dash und unseren APIs möglich ist. Beim Erstellen von Dashboards, die hochvolumige API-Daten verarbeiten, sollte man sich bewusst sein, dass Infrastrukturkomponenten wie DNS zu Engpässen werden können - wir haben AWS DNS-Skalierungsherausforderungen erlebt, die unsere Datenverarbeitungsfähigkeiten beeinträchtigten. Für visuelle Workflow-Enthusiasten, Sie können auch Flow Builder mit Google Cloud Functions und Vision API integrieren, um KI-gestützte Automatisierung in Ihre Datenverarbeitungspipelines einzubinden.

Als ich online zu suchen begann, wollte ich den Weg des geringsten Widerstands finden. Ich hätte alle Dashboards und UIs selbst in HTML und Python erstellen können, aber nach einigem Googeln stieß ich auf Plotly’s Dash, das sich leicht mit Python integriert. Ich entschied mich aus zwei Gründen für Dash: 1) es ist Open Source und 2) nach dem Lesen der Dokumentation schien es leicht anpassbar für das, was ich vorhatte. Dash ist eine Open-Source-Bibliothek, die ideal zum Erstellen und Bereitstellen von Datenanwendungen mit angepassten Benutzeroberflächen ist. Dies machte das Erstellen einer UI extrem einfach. Die Frage wurde dann, wie komplex ich diese App gestalten wollte. Je mehr Zeit ich damit verbrachte, 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. Dann, als ich Feedback von Kollegen erhielt, verbesserte ich das Dashboard ein wenig, um Mehrfachauswahl und Achsentitel hinzuzufügen. Ich entschied mich auch, einen zusätzlichen Tab für ein Ereignisprotokoll hinzuzufügen. Ich kam zu dem Punkt, an dem ich zufrieden war mit dem, was ich als guten Ausgangspunkt für jeden hatte, der seine eigenen Dashboards erstellen 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. Es wird unter http://localhost:8050 ausgeführt. Für weitere Informationen über die Bereitstellung auf einem öffentlich zugänglichen Server (wie AWS) sehen Sie sich die folgenden Ressourcen an:

Erstellen der Dashboard-Seite

Zuerst initialisieren Sie das Datenframe und das Dashboard. Ohne Initialisierung des Dashboards wird kein Dashboard in der UI angezeigt.

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) zusammen mit einer bedingten Funktion, um zu überprüfen, welcher Tab derzeit ausgewählt ist. Der nachfolgende Code erstellt nur das leere Dashboard und die UI-Elemente (zum Event-Tab kommen wir später). Die dcc-Elemente sind die Dash Core Components und die HTML Components, die es einfach ermöglichen, HTML in der 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 bei Dash, wie einfach es ist, ein Dashboard-UI mit einem Multi-Select- und durchsuchbaren Dropdown zu erstellen. Um Multi-Select oder Suche zu deaktivieren, können die Parameter zum Erstellen eines Dropdowns einfach modifiziert werden. Ich fand, dass der komplexeste Teil dieses Projekts darin bestand, das tatsächliche Datenframe aus Eingaben zu erstellen und HTML + CSS korrekt in der UI zu integrieren.

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, Sendedomains, Unterkonten filtern und die Präzision der Zeitreihendaten angeben. Diese zusätzlichen Filter zusammen mit Zustellbarkeitsanalysen könnten eine zukünftige Verbesserung dieses Projekts sein (Fehlererkennung müsste für Kunden implementiert werden, die keinen Zugriff auf Zustellbarkeitsanalysen 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 auf. Das initialisierte Dashboard wird dann aktualisiert.

# 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 Zeitrahmen.

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

Zuerst initialisieren Sie das Datenframe und das Dashboard. Ohne Initialisierung des Dashboards wird kein Dashboard in der UI angezeigt.

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

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)

# 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 Zeitrahmen.

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

Zuerst initialisieren Sie das Datenframe und das Dashboard. Ohne Initialisierung des Dashboards wird kein Dashboard in der UI angezeigt.

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

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)

# 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 Zeitrahmen.

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

Erstellung der Event Details Page

Die Seite mit den Veranstaltungsdetails war etwas schwieriger, da ich nicht wusste, wie ich die Metriken aller Veranstaltungen am besten in einer leicht lesbaren Weise präsentieren sollte. Ich habe in Betracht gezogen, dieser Seite Filterparameter hinzuzufügen, jedoch habe ich entschieden, dass dies einen erheblichen Aufwand für dieses Projekt bedeuten würde, da die Tabelle dann dynamisch sein müsste (zusammen mit dem Hinzufügen der Parameter, Rückrufe usw.). Ich entschied mich dafür, alle Veranstaltungen anzuzeigen und den Zeitstempel zuerst zu platzieren (da ohne den Zeitstempel an erster Stelle das Diagramm nicht leicht zu lesen war). Anfangs fand ich, dass die Tabelle mit nur dem rohen HTML unglaublich schwer für die Augen war. Es gab keine Grenzen und keine Farbdifferenzen 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 dieselbe wie beim Dashboard, außer dass ich dieses Mal die Events API aufrufe und alle Veranstaltungen importiere. Beachten Sie, dass die Veranstaltungsdetails nur die 10 zuletzt stattgefundenen Veranstaltungen anzeigen (unter Verwendung des max_rows Parameters und der API-Filterung). Dies kann erhöht werden, jedoch entschied ich mich, die 10 zuletzt stattgefundenen Veranstaltungen anzuzeigen, da je mehr Veranstaltungen gezeigt werden, desto länger dauert der API-Aufruf. Eine signifikante Verbesserung, die gemacht werden könnte, wäre die Möglichkeit zur Paginierung und das Hinzufügen einer nächsten Seite / vorherigen Seite in die Benutzeroberfläche.

Um den Reiter für Veranstaltungen (Seite) aufzubauen, 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 einzufügen. Schließlich baue ich die HTML-Tabelle auf, indem ich durch den Datenrahmen 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))
        ])
    ])
])

Was in der Benutzeroberfläche so aussieht.

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

Andere Neuigkeiten

Mehr lesen aus dieser Kategorie

E-Mail

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

E-Mail

Erste Schritte mit CppUTest

E-Mail

Verwendung von Bird-Produkten kombiniert

E-Mail

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

E-Mail

Erste Schritte mit CppUTest

E-Mail

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

E-Mail

Erste Schritte mit CppUTest

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.

Erreichen

Voice API

Numbers API

SMS API

WhatsApp-API

Grow

Marketing

Vertrieb

Manage

Unterstützung

Zahlungen

Ausgaben

Automate

Workflows

Ressourcen

Changelog

Wissensdatenbank

Entwicklerhub

Support-Center

Kunden

Blog

Unternehmen

Über

Preise

Partner

Karriere

Rechtlich

Terms

Datenschutzeinstellungen

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

x.com

Instagram

Support kontaktieren

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.

Erreichen

Voice API

Numbers API

SMS API

WhatsApp-API

Grow

Marketing

Vertrieb

Manage

Unterstützung

Zahlungen

Ausgaben

Automate

Workflows

Ressourcen

Changelog

Wissensdatenbank

Entwicklerhub

Support-Center

Kunden

Blog

Unternehmen

Über

Preise

Partner

Karriere

Rechtlich

Terms

Datenschutzeinstellungen

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

x.com

Instagram

Support kontaktieren

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.

Erreichen

Grow

Manage

Automate

Ressourcen

Changelog

Wissensdatenbank

Entwicklerhub

Support-Center

Kunden

Blog

Unternehmen

Über

Preise

Partner

Karriere

Rechtlich

Terms

Datenschutzeinstellungen

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

Support kontaktieren

Ein Dashboarding-Tool mit Bird APIs

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.

Business in a box.

Entdecken Sie unsere Lösungen.

Erste Schritte

Erstellen der Dashboard-Seite

Erstellung der Event Details Page

Nächste Schritte

Andere Neuigkeiten

Mehr lesen aus dieser Kategorie

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

Erste Schritte mit CppUTest

Verwendung von Bird-Produkten kombiniert

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

Erste Schritte mit CppUTest

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

Erste Schritte mit CppUTest

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

Erreichen

Grow

Manage

Automate

Ressourcen

Unternehmen

Newsletter

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

Erreichen

Grow

Manage

Automate

Ressourcen

Unternehmen

Newsletter

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

Erreichen

Grow

Manage

Automate

Ressourcen

Unternehmen

Newsletter

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

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

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