רמת קושי 1

התאמת דשבורדים ב Data Studio למובייל

הגיע הזמן לפצח את Data Studio ולמרות שהוא לא תומך בזה - לבנות דוחות מואמים למובייל. מדריך מפורט, צעד צעד. לא תעשו כזה?

אסף טרפיקנט | 04 מרץ, 2019

מת על Data Studio.

אחלה כלי, בחינם, מחבר אותו לאן שאני רוצה ובונה ללקוחות ולי דשבורדים מופלאים. מהכותרת אתם כבר מבינים שיש חסרון אחד גדול למערכת. מערכת הדשבורדים של Data Studio היא לצורך העניין מערכת Canvas. מערכת שמציירים עליה כמו על בד. ולבד הזה יש גודל, ואנו מפזרים עליו מטריקות וגרפים וטבלאות. וכמו רוב מערכות קנבס – גם Data Studio אינה רספונסיבית. לא שזה הטריד אותי יותר מדי בהתחלה. אבל פתאום לקוח אחד ביקש ומפה לשם כבר התחלנו לטפל בסוגייה הזו – איך עושים ב Data Studio דשבורד שמותאם למובייל?

שלב א' – מה צריך לדוח במובייל?

בגלל מגבלות מקום ובגלל ש Data Studio לא מותאם ולא מיועד למובייל, הרבה אלמנטים לא יראו טוב. למשל, בחירת תאריך? תשכחו מזה. דפדוף בטבלאות? אולי אם לא תתפרעו בגודל הטבלה וכמות הדאטה. אז תחשבו מה אתם שמים בדשבורד הזה, עדיף גרפים, מגמות, תרשים פאי, והאהוב עלי Scorecard. גם Dropdowns ופילטרים למיניהם לא מומלץ. כמה שפחות אפשרות לאינטראקציות של המשתמש – יותר טוב.

שלב ב – משכפלים את הדוח הקיים

כן, כן. אנחנו לא יכולים להגיד לגוגל להפוך את הדשבורד לרספונסיבי, אלא נאלץ לייצר דשבורד חדש ונתאים אותו למובייל. שזה אומר שבמידה ויש שינויים ותיקונים, נאלץ לעשות אותם פעמיים. בדוח הישן ובדוח המותאם. אבל מה לא עושים כדי שכולם יהיו מרוצים. אז כנסו לדוח הקיים, ובתפריט File בחרו Make a Copy.

בתהליך השכפול גוגל ישאל אתכם שאלה לגבי Data Sources ומאפשר לכם בעצם לייצר עותק של הדוח אבל לחבר אותו ל Data Sources שונים. תתעלמו מזה, לחצו על Create Report ותוקפצו היישר לדוח החדש. שנו לו את השם למשהו שיבהיר שמדובר בגרסת מובייל (דוח מרכזי – מותאם מובייל)

שלב ג – הגדרות הקנבס

בשלב זה אני ממליץ לסמן את כל האובייקטים של הדשבורד – הגרפים וכו' – להקטין אותם, להקטין פונטים, לצמצם רווחים ולהזיז לצד שמאל של הדוח ככל האפשר. ולהשאיר את צד ימין ריק ככל האפשר. גם אם האובייקטים יעלו אחד על השני, לא נורא.

לאחר מכן, הקליקו על הקנבס הלבן ברקע, ויפתח לכם חלון האפשרויות הבא בצד ימין:

  1. בהגדרה של Header Visibility בחרו Auto Hide. ברגע שתכנסו לדשבורד, לא יופיע למעלה ה Toolbar אלא רק הדשבורד.
  2. במידה ויש לכם דשבורד המורכב מכמה דפים, אז או שתמזגו את התוכן בדף אחד, או שתצטרכו כפתורי ניווט בין הדפים. במידה ואתם צריכים כפתורים, בחרו ב Navigation Position בערך Left. במידה ואין לכם דוחות נוספים והכל נכנס בדף אחד, בחרו Top.
  3. ב Display Mode בחרו Fit To Width, מה שיגרום לגוגל לשחק עם העיצוב על מנת שכל הקומפוננטות יותאמו לרוחב. ולא, זה לא רספונסיבי. אבל זה מקל.
  4. הכי חשוב, במידות של הקנבס, בחרו ברוחב של בין 300-400 פיקסלים וגובה (Height) בהתאם לצורך שלכם. גם 2000 פיקסלים לגובה זה אחלה.
  5. סדרו חלק מהגרפים והמטריקות שלכם, לפחות בחלק העליון.
  6. לחצו על כפתור השיתוף של הדוח, העתיקו את הלינק המתקבל ופתחו אותו במובייל.
  7. המשיכו לשפר את שאר המרכיבים בדשבורד עד שיראה פיגוז.
  8. שלחו את הלינק ללקוח. אפשר לייצר קיצורי דרך על דף הבית של הסמארטפונים והרי לכם דוח מותאם למובייל.

איך זה נראה בסוף?

הנה שני צילומי מסך Side-by-side מהטלפון. השמאלי הוא דוח אחד הבנוי לארוך, והימני הוא אותו הדוח אבל הפעם מפוצל לדפים שונים ואפשר לראות בצד שמאל את תפריט הניווט.

בהצלחה!

אסף טרפיקנט
רוצה לקרוא אחר כך?

הגיע הזמן לפצח את Data Studio ולמרות שהוא לא תומך בזה - לבנות דוחות מואמים למובייל. מדריך מפורט, צעד צעד. לא תעשו כזה?

מת על Data Studio.

אחלה כלי, בחינם, מחבר אותו לאן שאני רוצה ובונה ללקוחות ולי דשבורדים מופלאים. מהכותרת אתם כבר מבינים שיש חסרון אחד גדול למערכת. מערכת הדשבורדים של Data Studio היא לצורך העניין מערכת Canvas. מערכת שמציירים עליה כמו על בד. ולבד הזה יש גודל, ואנו מפזרים עליו מטריקות וגרפים וטבלאות. וכמו רוב מערכות קנבס – גם Data Studio אינה רספונסיבית. לא שזה הטריד אותי יותר מדי בהתחלה. אבל פתאום לקוח אחד ביקש ומפה לשם כבר התחלנו לטפל בסוגייה הזו – איך עושים ב Data Studio דשבורד שמותאם למובייל?

שלב א' – מה צריך לדוח במובייל?

בגלל מגבלות מקום ובגלל ש Data Studio לא מותאם ולא מיועד למובייל, הרבה אלמנטים לא יראו טוב. למשל, בחירת תאריך? תשכחו מזה. דפדוף בטבלאות? אולי אם לא תתפרעו בגודל הטבלה וכמות הדאטה. אז תחשבו מה אתם שמים בדשבורד הזה, עדיף גרפים, מגמות, תרשים פאי, והאהוב עלי Scorecard. גם Dropdowns ופילטרים למיניהם לא מומלץ. כמה שפחות אפשרות לאינטראקציות של המשתמש – יותר טוב.

שלב ב – משכפלים את הדוח הקיים

כן, כן. אנחנו לא יכולים להגיד לגוגל להפוך את הדשבורד לרספונסיבי, אלא נאלץ לייצר דשבורד חדש ונתאים אותו למובייל. שזה אומר שבמידה ויש שינויים ותיקונים, נאלץ לעשות אותם פעמיים. בדוח הישן ובדוח המותאם. אבל מה לא עושים כדי שכולם יהיו מרוצים. אז כנסו לדוח הקיים, ובתפריט File בחרו Make a Copy.

בתהליך השכפול גוגל ישאל אתכם שאלה לגבי Data Sources ומאפשר לכם בעצם לייצר עותק של הדוח אבל לחבר אותו ל Data Sources שונים. תתעלמו מזה, לחצו על Create Report ותוקפצו היישר לדוח החדש. שנו לו את השם למשהו שיבהיר שמדובר בגרסת מובייל (דוח מרכזי – מותאם מובייל)

שלב ג – הגדרות הקנבס

בשלב זה אני ממליץ לסמן את כל האובייקטים של הדשבורד – הגרפים וכו' – להקטין אותם, להקטין פונטים, לצמצם רווחים ולהזיז לצד שמאל של הדוח ככל האפשר. ולהשאיר את צד ימין ריק ככל האפשר. גם אם האובייקטים יעלו אחד על השני, לא נורא.

לאחר מכן, הקליקו על הקנבס הלבן ברקע, ויפתח לכם חלון האפשרויות הבא בצד ימין:

  1. בהגדרה של Header Visibility בחרו Auto Hide. ברגע שתכנסו לדשבורד, לא יופיע למעלה ה Toolbar אלא רק הדשבורד.
  2. במידה ויש לכם דשבורד המורכב מכמה דפים, אז או שתמזגו את התוכן בדף אחד, או שתצטרכו כפתורי ניווט בין הדפים. במידה ואתם צריכים כפתורים, בחרו ב Navigation Position בערך Left. במידה ואין לכם דוחות נוספים והכל נכנס בדף אחד, בחרו Top.
  3. ב Display Mode בחרו Fit To Width, מה שיגרום לגוגל לשחק עם העיצוב על מנת שכל הקומפוננטות יותאמו לרוחב. ולא, זה לא רספונסיבי. אבל זה מקל.
  4. הכי חשוב, במידות של הקנבס, בחרו ברוחב של בין 300-400 פיקסלים וגובה (Height) בהתאם לצורך שלכם. גם 2000 פיקסלים לגובה זה אחלה.
  5. סדרו חלק מהגרפים והמטריקות שלכם, לפחות בחלק העליון.
  6. לחצו על כפתור השיתוף של הדוח, העתיקו את הלינק המתקבל ופתחו אותו במובייל.
  7. המשיכו לשפר את שאר המרכיבים בדשבורד עד שיראה פיגוז.
  8. שלחו את הלינק ללקוח. אפשר לייצר קיצורי דרך על דף הבית של הסמארטפונים והרי לכם דוח מותאם למובייל.

איך זה נראה בסוף?

הנה שני צילומי מסך Side-by-side מהטלפון. השמאלי הוא דוח אחד הבנוי לארוך, והימני הוא אותו הדוח אבל הפעם מפוצל לדפים שונים ואפשר לראות בצד שמאל את תפריט הניווט.

בהצלחה!