Alat Dasbor dengan API Burung
Zachary Samuels
24 Mar 2022
1 min read
Intisari Utama
Bird APIs dapat dikombinasikan dengan Python dan Plotly Dash untuk membangun dashboard yang interaktif dan kuat tanpa memerlukan Bird UI sepenuhnya.
Proyek ini menunjukkan cara untuk memvisualisasikan metrik dan acara menggunakan Bird’s Metrics API dan Events API dalam aplikasi web kustom.
Plotly Dash menyediakan kerangka kerja sumber terbuka yang cepat untuk membangun elemen UI seperti dropdown, grafik, dan tabel.
Pengembang dapat memperluas alat ini dengan analisis kemampuan pengiriman, penyaringan, dan paginasi untuk dashboard yang lebih kaya.
Peningkatan di masa depan termasuk caching, UI yang lebih baik, dan integrasi dengan produk Bird lainnya atau API pihak ketiga.
Basis kode (tersedia di GitHub) menawarkan titik awal yang kuat bagi siapa saja yang ingin membangun dashboard atau portal yang didukung Bird untuk pelanggan.
Sorotan Q&A
Apa tujuan dari proyek dashboarding ini?
Ini menunjukkan bagaimana pengembang dapat menggunakan Bird APIs dengan Python dan Plotly Dash untuk membuat dasbor berbasis data yang memvisualisasikan metrik kampanye dan acara terbaru.
Mengapa menggunakan Plotly Dash untuk Bird APIs?
Dash adalah open source, mudah untuk dikustomisasi, dan ideal untuk membuat UI interaktif tanpa memerlukan keahlian front-end.
Apa yang ditampilkan oleh dashboard?
Ini memvisualisasikan metrik deret waktu dari Bird's Metrics API dan data peristiwa terbaru dari Events API, dengan opsi untuk menyaring dan memilih metrik dalam rentang waktu khusus.
Bagaimana alat ini dapat diperluas lebih lanjut?
Dengan menambahkan analitik pengiriman, filter lanjutan, penyimpanan data dalam cache, dan paginasi untuk kumpulan data besar guna meningkatkan kinerja dan kegunaan.
Keterampilan atau alat apa yang dibutuhkan untuk menjalankannya?
Pengetahuan dasar Python dan instalasi requests, dash, dan pandas. Kunci API dari Bird diperlukan untuk menarik data.
Bagaimana proyek ini cocok dengan ekosistem Bird?
Ini menggambarkan bagaimana API terbuka Bird dapat dimanfaatkan untuk membuat dasbor kustom dan alat pelaporan untuk tim atau klien tanpa akses ke platform penuh.
Skrip ini hanya menyentuh permukaan dari apa yang mungkin dilakukan dengan menggunakan Python, Plotly Dash, dan API kami.
Bird Metrics API + Dashboarding dengan Python
Hampir setahun yang lalu, Tom Mairs, direktur kesuksesan pelanggan Bird, menulis alat pengirim menggunakan Bird APIs. Dalam tulisan ini, saya melanjutkan dari tempat dia tinggalkan. Alatnya memungkinkan transmisi pekerjaan berjangka waktu, tetapi bagaimana jika kita ingin membuat dasbor dan log acara kita sendiri?
Mungkin saya ingin membuat dasbor tertentu untuk grup bisnis atau dasbor yang berhadapan dengan pelanggan, tetapi tidak memberikan akses penuh kepada pengguna ke Bird UI. Skrip ini hanya menyentuh permukaan dari apa yang mungkin dilakukan dengan menggunakan Python, Plotly Dash, dan APIs kami. Saat membangun dasbor yang memproses data API dengan volume tinggi, waspada bahwa komponen infrastruktur seperti DNS bisa menjadi penghambat - kami telah mengalami tantangan skala AWS DNS yang mempengaruhi kemampuan pemrosesan data kami. Bagi penggemar alur kerja visual, Anda juga dapat menjelajahi mengintegrasikan Flow Builder dengan Google Cloud Functions dan Vision API untuk menambahkan otomatisasi yang didukung AI ke dalam pipeline pemrosesan data Anda.
Ketika saya mulai mencari secara online, saya ingin menemukan jalur dengan hambatan paling sedikit. Saya bisa saja membuat semua dasbor dan UI sendiri dalam HTML dan python, namun, setelah mencari di Google, saya menemukan Plotly’s Dash, yang terintegrasi dengan mudah dengan python. Saya memilih Dash karena 2 alasan: 1) itu open source, dan 2) setelah membaca dokumentasi, tampaknya mudah disesuaikan dengan apa yang ingin saya lakukan. Dash adalah pustaka open source yang ideal untuk membangun dan menerapkan aplikasi data dengan antarmuka pengguna yang disesuaikan. Ini membuat pembuatan UI sangat sederhana. Pertanyaannya kemudian menjadi, seberapa kompleks saya ingin membuat aplikasi ini? Semakin banyak waktu yang saya habiskan, semakin banyak fitur yang ingin saya tambahkan.
Untuk proyek awal, saya ingin memastikan bahwa saya memiliki dasbor dengan metrik yang dapat disesuaikan dan kerangka waktu yang dapat dipilih. Awalnya, saya mulai dengan dasbor di mana Anda hanya dapat memilih satu metrik dari dropdown. Kemudian, setelah mendapatkan umpan balik dari rekan-rekan, saya menyempurnakan dasbor sedikit untuk menambahkan multi-pilih dan judul sumbu. Saya juga memutuskan untuk menambahkan tab tambahan untuk log acara. Saya sampai pada titik di mana saya puas dengan apa yang saya miliki sebagai titik awal yang baik bagi siapa pun yang ingin membangun dasbor mereka sendiri. Untuk pengembang yang ingin memasukkan data webhook real-time ke dasbor mereka, lihat panduan kami tentang membangun konsumen webhook dengan Azure Functions. Tentu saja, saya menempatkan proyek di Github untuk Anda klon atau cabang.
Bird Metrics API + Dashboarding dengan Python
Hampir setahun yang lalu, Tom Mairs, direktur kesuksesan pelanggan Bird, menulis alat pengirim menggunakan Bird APIs. Dalam tulisan ini, saya melanjutkan dari tempat dia tinggalkan. Alatnya memungkinkan transmisi pekerjaan berjangka waktu, tetapi bagaimana jika kita ingin membuat dasbor dan log acara kita sendiri?
Mungkin saya ingin membuat dasbor tertentu untuk grup bisnis atau dasbor yang berhadapan dengan pelanggan, tetapi tidak memberikan akses penuh kepada pengguna ke Bird UI. Skrip ini hanya menyentuh permukaan dari apa yang mungkin dilakukan dengan menggunakan Python, Plotly Dash, dan APIs kami. Saat membangun dasbor yang memproses data API dengan volume tinggi, waspada bahwa komponen infrastruktur seperti DNS bisa menjadi penghambat - kami telah mengalami tantangan skala AWS DNS yang mempengaruhi kemampuan pemrosesan data kami. Bagi penggemar alur kerja visual, Anda juga dapat menjelajahi mengintegrasikan Flow Builder dengan Google Cloud Functions dan Vision API untuk menambahkan otomatisasi yang didukung AI ke dalam pipeline pemrosesan data Anda.
Ketika saya mulai mencari secara online, saya ingin menemukan jalur dengan hambatan paling sedikit. Saya bisa saja membuat semua dasbor dan UI sendiri dalam HTML dan python, namun, setelah mencari di Google, saya menemukan Plotly’s Dash, yang terintegrasi dengan mudah dengan python. Saya memilih Dash karena 2 alasan: 1) itu open source, dan 2) setelah membaca dokumentasi, tampaknya mudah disesuaikan dengan apa yang ingin saya lakukan. Dash adalah pustaka open source yang ideal untuk membangun dan menerapkan aplikasi data dengan antarmuka pengguna yang disesuaikan. Ini membuat pembuatan UI sangat sederhana. Pertanyaannya kemudian menjadi, seberapa kompleks saya ingin membuat aplikasi ini? Semakin banyak waktu yang saya habiskan, semakin banyak fitur yang ingin saya tambahkan.
Untuk proyek awal, saya ingin memastikan bahwa saya memiliki dasbor dengan metrik yang dapat disesuaikan dan kerangka waktu yang dapat dipilih. Awalnya, saya mulai dengan dasbor di mana Anda hanya dapat memilih satu metrik dari dropdown. Kemudian, setelah mendapatkan umpan balik dari rekan-rekan, saya menyempurnakan dasbor sedikit untuk menambahkan multi-pilih dan judul sumbu. Saya juga memutuskan untuk menambahkan tab tambahan untuk log acara. Saya sampai pada titik di mana saya puas dengan apa yang saya miliki sebagai titik awal yang baik bagi siapa pun yang ingin membangun dasbor mereka sendiri. Untuk pengembang yang ingin memasukkan data webhook real-time ke dasbor mereka, lihat panduan kami tentang membangun konsumen webhook dengan Azure Functions. Tentu saja, saya menempatkan proyek di Github untuk Anda klon atau cabang.
Bird Metrics API + Dashboarding dengan Python
Hampir setahun yang lalu, Tom Mairs, direktur kesuksesan pelanggan Bird, menulis alat pengirim menggunakan Bird APIs. Dalam tulisan ini, saya melanjutkan dari tempat dia tinggalkan. Alatnya memungkinkan transmisi pekerjaan berjangka waktu, tetapi bagaimana jika kita ingin membuat dasbor dan log acara kita sendiri?
Mungkin saya ingin membuat dasbor tertentu untuk grup bisnis atau dasbor yang berhadapan dengan pelanggan, tetapi tidak memberikan akses penuh kepada pengguna ke Bird UI. Skrip ini hanya menyentuh permukaan dari apa yang mungkin dilakukan dengan menggunakan Python, Plotly Dash, dan APIs kami. Saat membangun dasbor yang memproses data API dengan volume tinggi, waspada bahwa komponen infrastruktur seperti DNS bisa menjadi penghambat - kami telah mengalami tantangan skala AWS DNS yang mempengaruhi kemampuan pemrosesan data kami. Bagi penggemar alur kerja visual, Anda juga dapat menjelajahi mengintegrasikan Flow Builder dengan Google Cloud Functions dan Vision API untuk menambahkan otomatisasi yang didukung AI ke dalam pipeline pemrosesan data Anda.
Ketika saya mulai mencari secara online, saya ingin menemukan jalur dengan hambatan paling sedikit. Saya bisa saja membuat semua dasbor dan UI sendiri dalam HTML dan python, namun, setelah mencari di Google, saya menemukan Plotly’s Dash, yang terintegrasi dengan mudah dengan python. Saya memilih Dash karena 2 alasan: 1) itu open source, dan 2) setelah membaca dokumentasi, tampaknya mudah disesuaikan dengan apa yang ingin saya lakukan. Dash adalah pustaka open source yang ideal untuk membangun dan menerapkan aplikasi data dengan antarmuka pengguna yang disesuaikan. Ini membuat pembuatan UI sangat sederhana. Pertanyaannya kemudian menjadi, seberapa kompleks saya ingin membuat aplikasi ini? Semakin banyak waktu yang saya habiskan, semakin banyak fitur yang ingin saya tambahkan.
Untuk proyek awal, saya ingin memastikan bahwa saya memiliki dasbor dengan metrik yang dapat disesuaikan dan kerangka waktu yang dapat dipilih. Awalnya, saya mulai dengan dasbor di mana Anda hanya dapat memilih satu metrik dari dropdown. Kemudian, setelah mendapatkan umpan balik dari rekan-rekan, saya menyempurnakan dasbor sedikit untuk menambahkan multi-pilih dan judul sumbu. Saya juga memutuskan untuk menambahkan tab tambahan untuk log acara. Saya sampai pada titik di mana saya puas dengan apa yang saya miliki sebagai titik awal yang baik bagi siapa pun yang ingin membangun dasbor mereka sendiri. Untuk pengembang yang ingin memasukkan data webhook real-time ke dasbor mereka, lihat panduan kami tentang membangun konsumen webhook dengan Azure Functions. Tentu saja, saya menempatkan proyek di Github untuk Anda klon atau cabang.
Memulai
Untuk mengakses app ini, Anda perlu memastikan bahwa Anda menjalankan python 3.10 atau di atasnya dan menginstal pustaka berikut:
Python Library | Purpose |
|---|---|
requests | Komunikasi API dengan layanan Bird |
dash | Rendering UI dan dashboard |
pandas | Pemrosesan data dan pembuatan tabel |
Kemudian, masukkan kunci API Anda ke dalam App.py dan jalankan app. Itu akan berjalan di http://localhost:8050. Untuk informasi lebih lanjut tentang menerapkan ini ke server yang menghadap publik (seperti AWS), lihat sumber daya berikut:
Untuk mengakses app ini, Anda perlu memastikan bahwa Anda menjalankan python 3.10 atau di atasnya dan menginstal pustaka berikut:
Python Library | Purpose |
|---|---|
requests | Komunikasi API dengan layanan Bird |
dash | Rendering UI dan dashboard |
pandas | Pemrosesan data dan pembuatan tabel |
Kemudian, masukkan kunci API Anda ke dalam App.py dan jalankan app. Itu akan berjalan di http://localhost:8050. Untuk informasi lebih lanjut tentang menerapkan ini ke server yang menghadap publik (seperti AWS), lihat sumber daya berikut:
Untuk mengakses app ini, Anda perlu memastikan bahwa Anda menjalankan python 3.10 atau di atasnya dan menginstal pustaka berikut:
Python Library | Purpose |
|---|---|
requests | Komunikasi API dengan layanan Bird |
dash | Rendering UI dan dashboard |
pandas | Pemrosesan data dan pembuatan tabel |
Kemudian, masukkan kunci API Anda ke dalam App.py dan jalankan app. Itu akan berjalan di http://localhost:8050. Untuk informasi lebih lanjut tentang menerapkan ini ke server yang menghadap publik (seperti AWS), lihat sumber daya berikut:
Membuat Halaman Dashboard
Pertama, inisialisasi kerangka data dan dashboard. Tanpa menginisialisasi dashboard, tidak ada dashboard yang akan muncul di UI.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Kemudian, bangun tab pertama. Ini adalah kombinasi dari app callback (untuk memeriksa tab mana yang sedang digunakan); bersama dengan fungsi kondisional untuk memeriksa tab mana yang sedang dipilih. Kode di bawah ini hanya membangun dashboard kosong dan elemen UI (kita akan membahas tab acara nanti). Elemen dcc adalah Dash Core Components dan HTML Components dengan mudah memungkinkan HTML digunakan dalam UI.
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)
Perhatikan dengan dash betapa mudahnya membuat UI dashboard dengan dropdown multi-pilih yang dapat dicari. Untuk menonaktifkan multi-pilih atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian paling kompleks dari proyek ini adalah membangun kerangka data yang sebenarnya dari masukan, serta membuat HTML + CSS berfungsi dengan baik di UI.
API Time Series Metrics memungkinkan 33 metrik individu ditarik berdasarkan rentang tanggal/waktu. Anda dapat memfilter lebih dalam berdasarkan Domain, Kampanye, Kolam IP, Domain Pengiriman, Subakun, dan menentukan Ketepatan data time-series. Filter tambahan ini bersama dengan analisis deliverability bisa menjadi peningkatan proyek ini di masa depan (penangkapan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analisis deliverability).
Memanfaatkan dan memanggil Metrics API, saya membangun dashboard dengan parameter yang dipilih pengguna dan rentang waktu yang ditentukan. Dashboard yang diinisialisasi kemudian diperbarui.
Tampilan Dashboard (API Time Series Metrics)
# 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
Berikut adalah contoh beberapa metrik yang dipilih dan rentang waktu yang diperluas.
Catatan: ada banyak item yang dibangun otomatis ke dalam grafik dash (hover, zoom, autoscale).
Pertama, inisialisasi kerangka data dan dashboard. Tanpa menginisialisasi dashboard, tidak ada dashboard yang akan muncul di UI.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Kemudian, bangun tab pertama. Ini adalah kombinasi dari app callback (untuk memeriksa tab mana yang sedang digunakan); bersama dengan fungsi kondisional untuk memeriksa tab mana yang sedang dipilih. Kode di bawah ini hanya membangun dashboard kosong dan elemen UI (kita akan membahas tab acara nanti). Elemen dcc adalah Dash Core Components dan HTML Components dengan mudah memungkinkan HTML digunakan dalam UI.
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)
Perhatikan dengan dash betapa mudahnya membuat UI dashboard dengan dropdown multi-pilih yang dapat dicari. Untuk menonaktifkan multi-pilih atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian paling kompleks dari proyek ini adalah membangun kerangka data yang sebenarnya dari masukan, serta membuat HTML + CSS berfungsi dengan baik di UI.
API Time Series Metrics memungkinkan 33 metrik individu ditarik berdasarkan rentang tanggal/waktu. Anda dapat memfilter lebih dalam berdasarkan Domain, Kampanye, Kolam IP, Domain Pengiriman, Subakun, dan menentukan Ketepatan data time-series. Filter tambahan ini bersama dengan analisis deliverability bisa menjadi peningkatan proyek ini di masa depan (penangkapan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analisis deliverability).
Memanfaatkan dan memanggil Metrics API, saya membangun dashboard dengan parameter yang dipilih pengguna dan rentang waktu yang ditentukan. Dashboard yang diinisialisasi kemudian diperbarui.
Tampilan Dashboard (API Time Series Metrics)
# 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
Berikut adalah contoh beberapa metrik yang dipilih dan rentang waktu yang diperluas.
Catatan: ada banyak item yang dibangun otomatis ke dalam grafik dash (hover, zoom, autoscale).
Pertama, inisialisasi kerangka data dan dashboard. Tanpa menginisialisasi dashboard, tidak ada dashboard yang akan muncul di UI.
df = pd.DataFrame({ "Count": [0, 0], "Time": [0, 0] }) fig = px.line(df, x="Time", y="Count")
Kemudian, bangun tab pertama. Ini adalah kombinasi dari app callback (untuk memeriksa tab mana yang sedang digunakan); bersama dengan fungsi kondisional untuk memeriksa tab mana yang sedang dipilih. Kode di bawah ini hanya membangun dashboard kosong dan elemen UI (kita akan membahas tab acara nanti). Elemen dcc adalah Dash Core Components dan HTML Components dengan mudah memungkinkan HTML digunakan dalam UI.
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)
Perhatikan dengan dash betapa mudahnya membuat UI dashboard dengan dropdown multi-pilih yang dapat dicari. Untuk menonaktifkan multi-pilih atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bahwa bagian paling kompleks dari proyek ini adalah membangun kerangka data yang sebenarnya dari masukan, serta membuat HTML + CSS berfungsi dengan baik di UI.
API Time Series Metrics memungkinkan 33 metrik individu ditarik berdasarkan rentang tanggal/waktu. Anda dapat memfilter lebih dalam berdasarkan Domain, Kampanye, Kolam IP, Domain Pengiriman, Subakun, dan menentukan Ketepatan data time-series. Filter tambahan ini bersama dengan analisis deliverability bisa menjadi peningkatan proyek ini di masa depan (penangkapan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analisis deliverability).
Memanfaatkan dan memanggil Metrics API, saya membangun dashboard dengan parameter yang dipilih pengguna dan rentang waktu yang ditentukan. Dashboard yang diinisialisasi kemudian diperbarui.
Tampilan Dashboard (API Time Series Metrics)
# 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
Berikut adalah contoh beberapa metrik yang dipilih dan rentang waktu yang diperluas.
Catatan: ada banyak item yang dibangun otomatis ke dalam grafik dash (hover, zoom, autoscale).
Membuat Halaman Detil Event
Halaman detail acara sedikit lebih sulit karena saya tidak tahu cara terbaik untuk menyajikan semua metrik acara dalam cara yang mudah dibaca. Saya mempertimbangkan untuk menambahkan parameter penyaringan ke halaman ini, namun, saya memutuskan bahwa itu akan menambah waktu yang signifikan untuk proyek ini karena tabel akan harus dinamis (bersama dengan menambahkan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan stempel waktu terlebih dahulu (karena tanpa menempatkan stempel waktu terlebih dahulu, grafiknya tidak mudah dibaca). Awalnya, saya menemukan bahwa dengan hanya HTML mentah, tabel tersebut sangat sulit untuk mata. Tidak ada batas garis dan tidak ada perbedaan warna untuk header vs baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.
Tampilan Detail Acara (Events API)
Ide untuk detail acara hampir sama dengan dasbor, tetapi kali ini, saya memanggil Events API dan membawa semua acara. Perhatikan bahwa detail acara hanya menampilkan 10 acara terbaru (menggunakan parameter max_rows dan penyaringan API). Ini bisa ditingkatkan, namun, saya memutuskan untuk menampilkan 10 acara terbaru karena semakin banyak acara yang ditampilkan, semakin lama panggilan API berlangsung. Satu peningkatan signifikan yang dapat dilakukan adalah kemampuan untuk melakukan pemisahan halaman dan menyertakan Halaman Berikutnya / Halaman Sebelumnya dalam UI.
Untuk membangun tab acara (halaman), pertama-tama saya memanggil Events API dan mengurai respons JSON ke dalam kerangka data. Kemudian saya menyusun dan mengurutkan ulang kerangka data untuk menempatkan stempel waktu sebagai kolom pertama. Akhirnya, saya membangun tabel HTML dengan mengulang melalui kerangka data.
# 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)) ]) ]) ])
Yang terlihat seperti ini di UI.
Halaman detail acara sedikit lebih sulit karena saya tidak tahu cara terbaik untuk menyajikan semua metrik acara dalam cara yang mudah dibaca. Saya mempertimbangkan untuk menambahkan parameter penyaringan ke halaman ini, namun, saya memutuskan bahwa itu akan menambah waktu yang signifikan untuk proyek ini karena tabel akan harus dinamis (bersama dengan menambahkan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan stempel waktu terlebih dahulu (karena tanpa menempatkan stempel waktu terlebih dahulu, grafiknya tidak mudah dibaca). Awalnya, saya menemukan bahwa dengan hanya HTML mentah, tabel tersebut sangat sulit untuk mata. Tidak ada batas garis dan tidak ada perbedaan warna untuk header vs baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.
Tampilan Detail Acara (Events API)
Ide untuk detail acara hampir sama dengan dasbor, tetapi kali ini, saya memanggil Events API dan membawa semua acara. Perhatikan bahwa detail acara hanya menampilkan 10 acara terbaru (menggunakan parameter max_rows dan penyaringan API). Ini bisa ditingkatkan, namun, saya memutuskan untuk menampilkan 10 acara terbaru karena semakin banyak acara yang ditampilkan, semakin lama panggilan API berlangsung. Satu peningkatan signifikan yang dapat dilakukan adalah kemampuan untuk melakukan pemisahan halaman dan menyertakan Halaman Berikutnya / Halaman Sebelumnya dalam UI.
Untuk membangun tab acara (halaman), pertama-tama saya memanggil Events API dan mengurai respons JSON ke dalam kerangka data. Kemudian saya menyusun dan mengurutkan ulang kerangka data untuk menempatkan stempel waktu sebagai kolom pertama. Akhirnya, saya membangun tabel HTML dengan mengulang melalui kerangka data.
# 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)) ]) ]) ])
Yang terlihat seperti ini di UI.
Halaman detail acara sedikit lebih sulit karena saya tidak tahu cara terbaik untuk menyajikan semua metrik acara dalam cara yang mudah dibaca. Saya mempertimbangkan untuk menambahkan parameter penyaringan ke halaman ini, namun, saya memutuskan bahwa itu akan menambah waktu yang signifikan untuk proyek ini karena tabel akan harus dinamis (bersama dengan menambahkan parameter, callback, dll.). Saya memutuskan untuk menampilkan semua acara dan menempatkan stempel waktu terlebih dahulu (karena tanpa menempatkan stempel waktu terlebih dahulu, grafiknya tidak mudah dibaca). Awalnya, saya menemukan bahwa dengan hanya HTML mentah, tabel tersebut sangat sulit untuk mata. Tidak ada batas garis dan tidak ada perbedaan warna untuk header vs baris. Untuk membuat tabel lebih mudah dibaca, saya dapat menggunakan CSS dalam Dash.
Tampilan Detail Acara (Events API)
Ide untuk detail acara hampir sama dengan dasbor, tetapi kali ini, saya memanggil Events API dan membawa semua acara. Perhatikan bahwa detail acara hanya menampilkan 10 acara terbaru (menggunakan parameter max_rows dan penyaringan API). Ini bisa ditingkatkan, namun, saya memutuskan untuk menampilkan 10 acara terbaru karena semakin banyak acara yang ditampilkan, semakin lama panggilan API berlangsung. Satu peningkatan signifikan yang dapat dilakukan adalah kemampuan untuk melakukan pemisahan halaman dan menyertakan Halaman Berikutnya / Halaman Sebelumnya dalam UI.
Untuk membangun tab acara (halaman), pertama-tama saya memanggil Events API dan mengurai respons JSON ke dalam kerangka data. Kemudian saya menyusun dan mengurutkan ulang kerangka data untuk menempatkan stempel waktu sebagai kolom pertama. Akhirnya, saya membangun tabel HTML dengan mengulang melalui kerangka data.
# 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)) ]) ]) ])
Yang terlihat seperti ini di UI.
Langkah Selanjutnya
Bagi seseorang yang ingin membuat dasbor atau catatan acara mereka sendiri, ini adalah awal yang baik. Dengan kustomisasi di sini, langit adalah batasnya.
Seperti dibahas di atas, beberapa perbaikan di masa depan yang dapat dilakukan adalah:
Menambahkan analitik pengiriman ke dasbor
Menambahkan lebih banyak filter ke dasbor
Opsi caching yang memungkinkan agar API tidak dipanggil setiap kali untuk menampilkan halaman
Peningkatan UI
Menambahkan filter dan paginasi ke halaman detail acara
Saya tertarik mendengar masukan atau saran untuk mengembangkan proyek ini.
~ Zach Samuels, Bird Senior Solutions Engineer
Bagi seseorang yang ingin membuat dasbor atau catatan acara mereka sendiri, ini adalah awal yang baik. Dengan kustomisasi di sini, langit adalah batasnya.
Seperti dibahas di atas, beberapa perbaikan di masa depan yang dapat dilakukan adalah:
Menambahkan analitik pengiriman ke dasbor
Menambahkan lebih banyak filter ke dasbor
Opsi caching yang memungkinkan agar API tidak dipanggil setiap kali untuk menampilkan halaman
Peningkatan UI
Menambahkan filter dan paginasi ke halaman detail acara
Saya tertarik mendengar masukan atau saran untuk mengembangkan proyek ini.
~ Zach Samuels, Bird Senior Solutions Engineer
Bagi seseorang yang ingin membuat dasbor atau catatan acara mereka sendiri, ini adalah awal yang baik. Dengan kustomisasi di sini, langit adalah batasnya.
Seperti dibahas di atas, beberapa perbaikan di masa depan yang dapat dilakukan adalah:
Menambahkan analitik pengiriman ke dasbor
Menambahkan lebih banyak filter ke dasbor
Opsi caching yang memungkinkan agar API tidak dipanggil setiap kali untuk menampilkan halaman
Peningkatan UI
Menambahkan filter dan paginasi ke halaman detail acara
Saya tertarik mendengar masukan atau saran untuk mengembangkan proyek ini.
~ Zach Samuels, Bird Senior Solutions Engineer
