ווידג'ט מפלס הכנרת: הסיפור מאחורי הקלעים

איך הכל התחיל

אז ככה, לפני בערך שנתיים (ספטמבר 2023), מפלס הכנרת היה בשיאים והכל דיברו על זה. אמרנו לעצמנו – רגע, זה הזמן הנכון לבנות משהו מגניב! זיהינו שיש פה הזדמנות מדהימה – אנשים חיפשו "מפלס כינרת" בגוגל יותר ממיליון פעמים! כן, מיליון! זה היה ממש פיק של עניין ציבורי.

החלטנו לפתח ווידג'ט דינמי שמראה את מפלס הכנרת בזמן אמת. המטרה? לנצל את הנישה הזו שלא הייתה לها הרבה תחרות, לקחת את הנתונים הפתוחים מ-data.gov.il ולעשות איתם משהו מעניין עם Vue.js.

כיום, כשהמפלס יורד למינימום היסטורי, הווידג'ט עדיין עובד ומספק ערך, אבל אתרי החדשות הגדולים עם כל ה-SEO הכבד שלהם דחקו אותנו לעמוד השני בגוגל. אבל בואו נספר את הסיפור מהתחלה.

למה בכלל עשינו את זה?

הכנרת – זה לא סתם אגם, זה המאגר המרכזי שלנו! בזמנים של שיא או משבר, כולם רוצים לדעת מה קורה שם. ב-2023, כשהמפלס היה גבוה ויותר ממיליון אנשים חיפשו "מפלס כינרת" בגוגל, הבנו שיש פה הזדמנות זהב.

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

רק שלא חשבנו שאתרי החדשות עם כל הכוח הדוממני שלהם ידחקו אותנו ככה… אבל זה כבר סיפור אחר.

איך בנינו את זה?

פיתחנו שני סוגי ווידג'ט:

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

ווידג'ט ויזואלי אינטראקטיבי – זה הכיף האמיתי! תצוגה גרافית של הכנרת עם שכבות PNG, אנימציית מים ואינדיקטורים חזותיים.

הנתונים מגיעים מ-data.gov.il

התבססנו על ה-API הפתוח של data.gov.il. כל יום יש שם נתונים עדכניים על מפלס הכנרת:

{

{
  "result": {
    "records": [
      { "_id": 1, "Survey_Date": "15/9/2025", "Kinneret_Level": -212.925 },
      ...
    ]
  }
}

Vue.js – הבחירה הנכונה

למה Vue.js? כי זה פשוט ויעיל. השתמשנו בגרסה inline (עם script ישיר) במקום פרויקט מלא, כדי לשמור על קוד קל להטמעה.

הנה דוגמה איך זה נראה:

<div id="app2" v-cloak>
    <form>
        <div class="field">
            <label class="label">כמות מדידות</label>
            <div class="control">
                <div class="select">
                    <select v-model="form.mesuresCount">
                        <option v-for="medida in medidot" :value="medida.value">
                            {{medida.text}}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <canvas id="myChart" style="width:100%;max-height:450px"></canvas>
    </form>
</div>

וה-JavaScript שמפעיל את הכל:

Vue.component('chart-widget', {
    data() {
        return {
            form: { mesuresCount: 7, waterColor: "#9EDAE9", layersOff: [], widgetSize: 1 },
            newDatas: [],
            newlevels: [],
            myLineChart: null
        };
    },
    methods: {
        parseDate(dateStr) {
            const [day, month, year] = dateStr.split('/').map(Number);
            const date = new Date(year, month - 1, day);
            return date;
        },
        getChartData() {
            axios.get(`${DATAGOV_API_URI}?resource_id=2de7b543-e13d-4e7e-b4c8-56071bc4d3c8&limit=${this.form.mesuresCount}`)
                .then(resp => {
                    this.Data = resp.data.result.records.reverse();
                    this.newDatas = this.Data.map(obj => this.formatDate(this.parseDate(obj.Survey_Date))).filter(date => date !== null);
                    this.newlevels = this.Data.map(obj => obj.Kinneret_Level);
                    this.drawChart();
                });
        },
        drawChart() {
            const ctx = document.getElementById('myChart').getContext('2d');
            if (this.myLineChart) this.myLineChart.destroy();
            this.myLineChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: this.newDatas,
                    datasets: [{
                        label: 'מפלס כינרת',
                        backgroundColor: 'rgba(125,185,232,0.1)',
                        borderColor: 'rgba(0,0,0,0.1)',
                        data: this.newlevels,
                        fill: 'start'
                    }]
                },
                options: {
                    title: { display: true, text: 'מפלס כינרת', fontSize: 16 },
                    legend: { display: false }
                }
            });
        }
    }
});

הקסם של השכבות

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

<div class="KineretWidget" :class="form.wgtBgColor">
    <div class="kineretLayers bowl" :style="{'max-width': this.initialWidth+'px', height: this.initialHeight+'px'}">
        <img :style="{'max-width': this.initialWidth+'px'}" src="static/img/layer2.png">
        <div class="level-wrapper fill" :style="{height: this.highWaterMark+'%'}">
            <svg :style="{'width': this.initialWidth * 1.2 + 'px'}" ...>
                <path :style="{ fill: form.waterColor }" class="waveShape" ... />
            </svg>
        </div>
        <img :style="{'max-width': this.initialWidth+'px'}" src="static/img/layer1.png">
    </div>
</div>

השכבה הדינמית של המים עובדת עם SVG ותבנית גל שמשתנה לפי המפלס האמיתי.

האתגרים שפגשנו

פורמט התאריך – ה-API נתן תאריכים בפורמט DD/MM/YYYY ו-JavaScript הלך על זה לגמרי. נאלצנו לפרק כל תאריך ידנית ולבנות אובייקט Date חדש.

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

SEO – הנה הכאב הגדול. למרות שהיה לנו תוכן ייחודי ואמיתי, אתרי החדשות עם כל הסמכות הדוממנית שלהם פשוט דרסו אותנו. עמוד 2 בגוגל זה כמו לא להיות בכלל…

מה למדנו?

נישות עם תחרות נמוכה זה מעולה, אבל אם יש לך ynet ו-walla באותה קטגוריה, אתה צריך אסטרטגיית SEO הרבה יותר חזקה. קישורים, שיתופי פעולה, כל הקופה.

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

התוכנית המקורית מול המציאות

הרעיון המקורי שלנו היה די אופטימי – חשבנו שכשאנשים יראו את הווידג'ט המגניב הזה שמראה את מפלס הכנרת בזמן אמת, הם פשוט יתאהבו בו וירצו להטמיע אותו באתרים שלהם. תיארנו לעצמנו איך בלוגרים, אתרי תוכן ואפילו עיתונאים מקומיים יקחו את ה-iframe הקטן שלנו וישבצו אותו בתוכן שלהם. חשבנו שזה יהיה viral – כל מי שרואה את הווידג'ט באתר אחד ירצה גם בשלו, ובאמצעות זה נצבור הרבה backlinks ונגביר את החשיפה של fungets.co.il. אבל המציאות הייתה הרבה יותר מתונה. בסוף רק כמה אתרים באמת הטמיעו את הווידג'ט שלנו. התברר שגם כשיש לך כלי טוב ושימושי, לגרום לאנשים להטמיע אותו באתר שלהם זה הרבה יותר מסובך ממה שחשבנו. אנשים אוהבים לראות, אבל לא בהכרח לקחת ולשבץ. זה לימד אותנו שיפה שההפצה האורגנית של widgets זה לא כזה פשוט כמו שזה נשמע בתיאוריה.

לסיכום

הווידג'ט הזה הוא דוגמה מעולה איך לקחת נתונים פתוחים ולעשות איתם משהו מגניב עם טכנולוגיות פשוטות. למרות שלא הגענו לעמוד הראשון בגוגל כמו שחלמנו (תודות לאתרי החדשות…), זה עדיין פרויקט שמספק ערך ומראה מה אפשר לעשות כשחושבים out of the box.

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