דפדף בקהילות SaaS בטוויטר, LinkedIn, Reddit, Discord, תן לזה ותראה נושא משותף מופיע ברבים מהם. הנושא הזה יכול לעבור בשמות רבים: BI, אנליטיקה, תובנות וכן הלאה. זה טבעי, אנחנו עושים עסקים, אוספים נתונים, אנחנו מצליחים או נכשלים. אנחנו רוצים לבדוק את כל זה, להבין קצת את הנתונים שיש לנו ולנקוט פעולה. הצורך הזה הוליד פרויקטים וכלים רבים שהופכים את החיים של כל מי שרוצה לבחון את הנתונים רק קצת יותר קלים. אבל, כשיש לבני אדם, בני אדם רוצים יותר. ובעולם ה-BI והאנליטיקה, "יותר" מגיע לרוב בצורה של הטמעה, מיתוג, סטיילינג וגישה מותאמים אישית וכן הלאה. מה שבסופו של דבר אומר יותר עבודה למפתחים ויותר זמן לתת דין וחשבון. אז, באופן טבעי היה צורך בכלי BI שיאפשרו לך לקבל הכל.
בואו נכין רשימה של אתגרים שאתם עשויים להתמודד מולם בתור הבונה והמתחזק של לוחות המחוונים האלה:
- אתה רוצה להפוך את לוחות המחוונים לזמינים למשתמשי קצה או לצופים מתוך האפליקציה או הפלטפורמה שלך
- אתה רוצה להיות מסוגל לנהל אוספי לוח מחוונים שונים (כלומר "אינטגרציות")
- אתה רוצה להיות מסוגל להעניק זכויות משתמש ספציפיות לאוסף של לוחות מחוונים ומערכי נתונים
- אתה רוצה לוודא שלמשתמשים תהיה גישה לנתונים הרלוונטיים רק להם
Cumul.io מספק כלי שאנו קוראים לו ואינטגרציות מה שעוזר לפתור אתגרים אלו. במאמר זה אדריך אותך מהן אינטגרציות וכיצד להגדיר אחת כזו. הדבר המגניב הוא שלרוב הנקודות לעיל, נדרש קוד מינימלי ולרוב ניתן להגדיר אותו בתוך Cumul.io ממשק משתמש.
קצת רקע - אינטגרציות
An אינטגרציה ב- Cumul.io הוא מבנה המגדיר אוסף של לוחות מחוונים המיועדים לשימוש יחד (למשל באותו יישום). זה גם מה שאנחנו רגילים לעשות שבץ לוחות מחוונים לתוך אפליקציה. במילים אחרות, כדי להטמיע לוחות מחוונים באפליקציה, אנו נותנים לאפליקציה גישה לאינטגרציה שהם שייכים אליה. אתה יכול לשייך לוחות מחוונים לאינטגרציה ולנהל איזה סוג של זכויות גישה יהיו למשתמשי הקצה של האינטגרציה במרכזי המחוונים הללו ובמערכי הנתונים שהם משתמשים בהם. לוח מחוונים עשוי להיות חלק משילובים מרובים, אך עשויות להיות לו זכויות גישה שונות באינטגרציות שונות. כשזה מגיע להטמעה, ישנם מספר SDK זמינים כדי להפוך את החיים לפשוטים ללא קשר לאיך נראית הערימה שלך. 😊
ברגע שיש לך חשבון Cumul.io ואם אתה "בעלים" של ארגון ב- Cumul.io, תוכל לנהל ולתחזק את כל האינטגרציות שלך דרך לשונית האינטגרציות. בואו נסתכל על חשבון Cumul.io לדוגמה. להלן אתה יכול לראות את לוחות המחוונים שמשתמש אחד של Cumul.io עשוי ליצור:
למרות שאלו כל לוחות המחוונים שייתכן שהמשתמש הזה יצר, סביר להניח שלא כל לוחות המחוונים מיועדים לאותם משתמשי קצה, או אפליקציה לצורך העניין. אז הבעלים של חשבון Cumul.io זה ייצור ויתחזק אינטגרציה (או יותר!) 💪 בואו נסתכל איך זה עשוי להיראות עבורו:
אז נראה שהבעלים של חשבון Cumul.io זה מחזיק בשני יישומים נפרדים.
כעת נראה כיצד ייראה תהליך יצירת האינטגרציה והטמעת לוחות המחוונים שלו באפליקציה. החדשות הטובות הן, כאמור, הרבה מהצעדים שתצטרכו לנקוט יכולים להיעשות בתוך ממשק המשתמש של Cumul.io.
כתב ויתור: למטרות מאמר זה, אתמקד אך ורק בחלק האינטגרציה. אז אני אוותר על כל מה שקשור ליצירת ועיצוב לוח המחוונים, ונתחיל עם קבוצה מוכנה מראש של לוחות מחוונים דמיוניים.
מה נעשה:
יצירת אינטגרציה
למען הפשטות, בואו ניצור רק אינטגרציה אחת לעת עתה. בואו נדמיין שיש לנו פלטפורמת אנליטיקה שאנו מתחזקים עבור החברה שלנו. ישנם שלושה לוחות מחוונים שאנו רוצים לספק למשתמשי הקצה שלנו: לוח המחוונים השיווקי, לוח המחוונים למכירות ולוח המחוונים של לידים.
נניח שמתוך כל לוחות המחוונים שהחשבון הזה יצר או שיש לו גישה אליהם, עבור הפרויקט הספציפי הזה הם רוצים להשתמש רק בדברים הבאים:
שילוב חדש
כדי ליצור את האינטגרציה, אנו עוברים ללשונית אינטגרציות ובוחרים באינטגרציה חדשה. הדיאלוג שצץ כבר ייתן לך מושג מה יהיו הצעדים הבאים שלך:
בחירת לוחות מחוונים
בשלב הבא, תוכל לבחור אילו ממרכזי המחוונים שלך ייכללו בשילוב זה. תוכל גם לתת לאינטגרציה שם, שכאן החלטתי שיהיה "שילוב חשוב מאוד":
לאחר שתאשר את בחירתך, תהיה לך אפשרות להגדיר שבלול עבור כל לוח מחוונים (מומלץ מאוד). ניתן להשתמש בהם מאוחר יותר בעת הטבעת לוחות המחוונים באפליקציה שלך. מאוחר יותר תראה ששבלולים מקלים על הפניה ללוחות מחוונים בקוד הקצה שלך, ומקלים על החלפת לוחות מחוונים במידת הצורך (כיוון שלא תצטרך לדאוג לגבי מזהי לוח מחוונים בקוד הקצה).
זכויות גישה
לאחר מכן תוכל להגדיר את זכויות הגישה של האינטגרציה עבור מערכי הנתונים שמרכזי המחוונים שלו משתמשים בהם. כאן הגדרנו את זה ל"יכול להציג." למידע נוסף על זכויות גישה ומה הן כרוכות, בדוק את שלנו שיוך מערכי נתונים לאינטגרציות:
מסננים ופרמטרים (וגישה מרובה דיירים)
הערה צדדית: כדי לסייע בגישה מרובה דיירים - מה שיהיה הגיוני בהגדרה הדמיונית הזו - Cumul.io מאפשר להגדיר פרמטרים ומסננים על מערכי נתונים שבהם לוח מחוונים משתמש. המשמעות היא שכל משתמש שנכנס לפלטפורמת הניתוח שלך יראה רק את הנתונים שיש לו גישה אליהם באופן אישי במרכזי המחוונים. אתה יכול לדמיין שבתרחיש זה הגישה תהיה מבוססת על איזו מחלקה משתמש הקצה עובד בחברה. למידע נוסף על איך להגדיר ריבוי דירות עם Cumul.io, עיין במאמר שלנו, "ריבוי דירות במרכזי מחוונים של Cumul.io עם Auth0". זה יכול להיעשות בתוך תהליך עיצוב לוח המחוונים (שאנחנו מדלגים עליו), מה שמקל על הדמיה של מה שהפילטרים עושים. אבל כאן, אנחנו נגדיר את המסננים האלה בתהליך יצירת האינטגרציה.
כאן, אנו מגדירים את המסננים שייתכן שיידרשו למערכי הנתונים. בתרחיש זה, כאשר אנו מסננים על סמך מחלקות המשתמשים, אנו מגדירים א department
פרמטר ומסנן על סמך זה:
והווא! לאחר שתסיים להגדיר אותם, יצרת בהצלחה אינטגרציה. הדיאלוג הבא ייתן לך הוראות מה יהיו השלבים הבאים שלך להטמעת השילוב שלך:
כעת תוכל לראות את האינטגרציה החדשה הזו בלשונית האינטגרציה שלך. זה גם המקום שבו תהיה לך גישה מהירה למזהה האינטגרציה, שישמש בהמשך להטמעת לוחות המחוונים.
חדשות טובות! לאחר יצירת האינטגרציה שלך, אתה תמיד יכול לערוך אותו. אתה יכול להסיר או להוסיף לוחות מחוונים, לשנות גם את השבילים של לוחות המחוונים או זכויות גישה. אז אתה לא צריך לדאוג לגבי יצירת אינטגרציות חדשות כשהאפליקציה שלך משתנה ומתפתחת. ומכיוון שעריכת אינטגרציה היא כולה בתוך ממשק המשתמש, לא תצטרך לדאוג לכך שמפתח יגדיר הכל מחדש. משתמשים שאינם טכניים יכולים להתאים את האינטגרציות הללו תוך כדי תנועה.
הטמעת לוחות מחוונים
בוא נראה לאן אנחנו רוצים להגיע. אנחנו רוצים לספק את לוחות המחוונים בתוך אפליקציה מותאמת אישית. פשוט, משתמש מתחבר לאפליקציה, לאפליקציה יש לוחות מחוונים, הם רואים את לוחות המחוונים עם הנתונים שהם רשאים לראות. זה יכול להיראות כמו למשל:
למישהו היה חזון מאוד ספציפי לגבי איך הם רוצים לספק את לוחות המחוונים למשתמש הקצה. הם רצו סרגל צד שבו יוכלו לדפדף בכל אחד מלוחות המחוונים. זה היה יכול להיות גם משהו אחר לגמרי. מה שנתמקד בו הוא כיצד נוכל להטמיע את לוחות המחוונים הללו באפליקציה שלנו ללא קשר לאיך נראית האפליקציה המארח.
Cumul.io מגיע עם קבוצה של SDK זמינים לציבור. כאן אני אראה לך מה היית עושה אם היית משתמש ב- Node SDK. בדוק את שלנו מסמכי מפתחים כדי לראות אילו ערכות SDK אחרות זמינות והוראות כיצד להשתמש בהן.
שלב 1: צור אסימוני SSO עבור משתמשי הקצה שלך
לפני שתוכל ליצור אסימוני SSO עבור משתמשי הקצה שלך, תצטרך לוודא שאתה יוצר מפתח API ואסימון ב- Cumul.io. אתה יכול לעשות זאת מפרופיל Cumul.io שלך. זה צריך להיות הבעלים של הארגון עם גישה לאינטגרציה שיוצר ומשתמש במפתח ה-API ובאסימון הזה כדי לבצע את בקשת הרשאת SSO. לאחר שעשית זאת, בוא ניצור תחילה לקוח Cumul.io שייעשה בצד השרת של היישום:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
כעת נוכל ליצור את אסימון SSO עבור משתמש הקצה. למידע נוסף על קריאת ה-API הזו ועל השדות הנדרשים, בדוק את שלנו תיעוד מפתח על יצירה SSO אסימונים.
let promise = client.create('authorization', { integration_id: '<THE INTEGRATION ID>', type: 'sso', expiry: '24 hours', inactivity_interval: '10 minutes', username: '< A unique identifier for your end user >', name: '< end-user name >', email: '< end-user email >', suborganization: '< end-user suborganization >', role: 'viewer', metadata: {}
});
כאן, שימו לב כיצד הוספנו את האופציונלי metadata
שדה. זה המקום שבו אתה יכול לספק את הפרמטרים והערכים שבהם אתה רוצה לסנן את מערכי הנתונים של לוחות המחוונים. בדוגמה שעברנו, סיננו על סמך מחלקה אז היינו מוסיפים את זה למטא נתונים. באופן אידיאלי תקבל מידע זה מספק האימות שבו אתה משתמש. לראות הסבר מפורט על איך עשינו זאת עם Auth0.
בקשה זו תחזיר אובייקט JSON המכיל מזהה הרשאה ואסימון המשמשים מאוחר יותר כשילוב מפתח/אסימון להטמעת לוחות מחוונים בצד הלקוח.
משהו אחר שאתה יכול להוסיף כאן באופן אופציונלי שהוא די מגניב הוא מאפיין CSS. זה יאפשר לך להגדיר מראה ותחושה מותאמים אישית עבור כל משתמש (או קבוצת משתמשים). עבור אותה אפליקציה, כך יכול להיראות לוח המחוונים השיווקי עבור אנג'לינה נגד בראד:
שלב 2: הטמע
קפצנו שם קצת קדימה. יצרנו אסימוני SSO עבור משתמשי קצה, אך עדיין לא הטמענו את לוחות המחוונים באפליקציה. בואו נסתכל על זה. ראשית, עליך להתקין ולייבא את רכיב אינטרנט.
import '@cumul.io/cumulio-dashboard';
לאחר ייבוא הרכיב תוכלו להשתמש בו כאילו היה תג HTML. זה המקום שבו תטמיע את לוחות המחוונים שלך:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
כאן יהיו לך כמה אפשרויות. אתה יכול לספק את מזהה לוח המחוונים עבור כל לוח המחוונים שאתה רוצה להטמיע, או שאתה יכול לספק את לוח המחוונים שהגדרנו בהגדרת האינטגרציה (ולכן אני ממליץ על זה בחום, זה הרבה יותר קריא לעשות את זה בדרך זו). למידע מפורט יותר על איך להטמיע לוחות מחוונים, אתה יכול גם לבדוק את שלנו תיעוד למפתחים.
דרך נחמדה לעשות את השלב הזה היא כמובן פשוט להגדיר את השלד של רכיב הדשבורד בקובץ ה-HTML שלך ומילוי שאר זה מצד הלקוח של האפליקציה שלך. עשיתי את הדברים הבאים, אם כי זו כמובן לא הדרך היחידה:
הוספתי את רכיב לוח המחוונים עם המזהה dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
לאחר מכן, אחזרתי את הרכיב הזה בקוד הלקוח באופן הבא:
const dashboardElement = document.getElementById("dashboard");
לאחר מכן אני מבקש את אסימון ה-SSO מצד השרת של האפליקציה שלי אשר מחזיר את המפתח והאסימון הנדרשים כדי להוסיף לרכיב לוח המחוונים. נניח שיש לנו פונקציית עטיפה getDashboardAuthorizationToken()
שעושה זאת עבורנו ומחזיר את התגובה מבקשת אסימון SSO בצד השרת. לאחר מכן, אנו פשוט ממלאים את רכיב לוח המחוונים בהתאם:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
שימו לב כיצד בשלבים הקודמים בחרתי להגדיר שבלולים עבור לוחות המחוונים שלי שהם חלק מהשילוב הזה. זה אומר שאני יכול להימנע מחיפוש מזהי לוח מחוונים והוספה dashboardId
כאחד הפרמטרים שלי של dashboardElement
. במקום זאת, אני יכול פשוט לספק אחד מהשבלולים marketing
, sales
or leads
ואני סיימתי! כמובן שתצטרך להגדיר איזשהו תהליך בחירה ליישום שלך כדי להחליט היכן ומתי אתה מטמיע איזה לוח מחוונים.
זהו זה אנשים! יצרנו בהצלחה אינטגרציה ב- Cumul.io ובכמה שורות קוד, הצלחנו להטמיע את לוחות המחוונים שלו באפליקציה שלנו 🎉 כעת דמיינו תרחיש שבו עליכם לתחזק מספר יישומים בו-זמנית, בין אם במסגרת אותה חברה או חברות נפרדות. לא משנה מה התרחיש שלך, אני בטוח שאתה יכול לדמיין איך אם יש לך מספר לוחות מחוונים שבהם כל אחד מהם צריך ללכת למקומות שונים ולכל אחד מהם יהיו זכויות גישה שונות בהתאם למקום שבו הם נמצאים ועוד ועוד. .. איך זה יכול לצאת מהר משליטה. האינטגרציות מאפשרות לך לנהל זאת בצורה פשוטה ומסודרת, הכל במקום אחד, וכפי שאתה יכול לראות, בעיקר מתוך ממשק המשתמש של Cumul.io.
יש עוד הרבה שאתה יכול לעשות כאן שלא עברנו עליהם בפירוט. כמו הוספת ערכות נושא מותאמות אישית ו-CSS ספציפיים למשתמש. לא עברנו גם על איך תגדיר פרמטרים ומסננים במרכזי המחוונים, או איך תשתמש בהם מתוך האפליקציה המארח שלך כך שתהיה לך הגדרה מרובה דיירים. להלן תוכל למצוא כמה קישורים למדריכים שימושיים ותיעוד לשלבים אלה אם אתה מעוניין.
מקור: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- גישה
- חֶשְׁבּוֹן
- פעולה
- תעשיות
- ניתוח
- API
- האפליקציה
- בקשה
- יישומים
- מאמר
- אימות
- אישור
- קצת
- מיתוג
- בונה
- עסקים
- שיחה
- שינוי
- קוד
- Common
- הקהילות
- חברה
- רְכִיב
- יוצרים
- לוח מחוונים
- נתונים
- עיצוב
- פרט
- מפתח
- מפתחים
- מחלוקת
- אמייל
- מסתיים
- פָּנִים
- שדות
- מסננים
- ראשון
- להתמקד
- טופס
- פונקציה
- טוב
- קְבוּצָה
- כאן
- איך
- איך
- HTTPS
- בני אדם
- רעיון
- יבוא
- מידע
- מידע
- תובנות
- השתלבות
- ואינטגרציות
- IT
- JavaScript
- מפתח
- לינקדין
- רשימה
- שיווק
- שמות
- נקי
- חדשות
- אפשרות
- אפשרויות
- ארגון
- אחר
- בעלים
- פלטפורמה
- מיוצר
- פּרוֹפִיל
- פּרוֹיֶקט
- פרויקטים
- רכוש
- תגובה
- REST
- החזרות
- SaaS
- מכירות
- תחושה
- סט
- הצבה
- פָּשׁוּט
- So
- לפתור
- ממומן
- העולם
- נושא
- זמן
- אסימון
- מטבעות
- הדרכות
- ui
- us
- משתמשים
- לצפיה
- חזון
- מי
- בתוך
- מילים
- תיק עבודות
- עובד
- עוֹלָם