בניית ווידג'ט סקרים מותאם אישית על 1C-Bitrix: NPS, CSAT ועוד

כשמשיקים מוצר חדש או אחרי שינויים בשירות, часто עולה אותה תמונה: מנהלים אוספים משוב ידנית דרך אימייל או מסנג'רים, נתונים הולכים לאיבוד, והניתוח מפגר. לאחרונה, לקוח מחנות אלקטרוניקה מקוונת פנה אלינו — ה-Net Promoter Score שלהם לא היה ידוע כי סקרים בוצעו פעם בחצי שנה דרך אימייל עם אחוז תגובה של 3%. הצבנו סקר קופץ בעמוד ההזמנה, ובתוך חודש קיבלנו 1200 תגובות עם תמונה מפורטת. בחודש אחד, NPS עלה מ-20 ל-45 — זה אפשר לנו לתקן במהירות אזורים בעייתיים בשירות המשלוחים. סקר באתר הוא הדרך היחידה לקבל נתונים מובנים ללא אובדן. לביטריקס אין מודול מוכן לסקרים ברמה סבירה — את ה-iblock המובנה אפשר להשתמש לאחסון, אבל את הלוגיקה של הסקר צריך לכתוב מאפס.

יישום סקר על 1C-Bitrix

אנחנו בונים את הארכיטקטורה על HL-blocks — זה מהיר וגמיש יותר מאשר בלוקי מידע. תרחישים טיפוסיים:

• NPS (Net Promoter Score) — סולם 0–10 עם תגובה.
• CSAT (Customer Satisfaction) — 1–2 שאלות אחרי פעולה ספציפית.
• סקר מלא — מספר עמודים עם סוגי שאלות שונים, הסתעפות, טריגרים להצגה.

מבנה נתונים דרך HL-blocks:

class SurveyTable extends \Bitrix\Main\ORM\Data\DataManager { public static function getTableName(): string { return 'b_hl_surveys'; } public static function getMap(): array { return [ new IntegerField('ID', ['primary' => true, 'autocomplete' => true]), new StringField('TITLE'), new StringField('SLUG'), new StringField('TYPE'), // nps | csat | full new TextField('QUESTIONS_JSON'), // Конфигурация вопросов new StringField('TRIGGER'), // page_load | exit_intent | scroll_50 | after_order new IntegerField('SHOW_DELAY'), // Задержка показа в секундах new BooleanField('IS_ACTIVE', ['values' => [false, true]]), new DatetimeField('DATE_FROM'), new DatetimeField('DATE_TO'), ]; } } class SurveyResponseTable extends \Bitrix\Main\ORM\Data\DataManager { public static function getTableName(): string { return 'b_hl_survey_responses'; } public static function getMap(): array { return [ new IntegerField('ID', ['primary' => true, 'autocomplete' => true]), new IntegerField('SURVEY_ID'), new IntegerField('USER_ID'), // NULL — анонимный new StringField('SESSION_ID'), new StringField('USER_IP'), new TextField('ANSWERS_JSON'), // {question_id: answer} new IntegerField('COMPLETION_SEC'), // Время прохождения new DatetimeField('CREATED_AT'), ]; } } 

סוגי סקרים ליישום

הבחירה תלויה במשימה העסקית. השוו אפשרויות:

סקר NPS — הדרך הפשוטה והזולה ביותר להתחיל לאסוף משוב. הוא דורש רק רכיב אחד עם וידג'ט.

סקר NPS: מקרה פשוט

יישום טיפוסי — עמוד אחד, פעולה אחת. קוד הרכיב:

// /local/components/local/survey.nps/template.php ?> <div class="nps-widget" id="nps-widget" style="display:none;"> <div class="nps-container"> <button class="nps-close" onclick="NPS.dismiss()">×</button> <p class="nps-question"> Насколько вы готовы рекомендовать нас своим знакомым? </p> <div class="nps-scale"> <?php for ($i = 0; $i <= 10; $i++): ?> <button class="nps-score" data-score="<?= $i ?>"><?= $i ?></button> <?php endfor; ?> </div> <div class="nps-labels"> <span>Точно не буду рекомендовать</span> <span>Обязательно порекомендую</span> </div> <div class="nps-comment" style="display:none;"> <textarea placeholder="Расскажите подробнее..." id="nps-comment-text"></textarea> <button onclick="NPS.submit()">Отправить</button> </div> </div> </div> <script> const NPS = { surveyId: <?= (int)$arResult['SURVEY']['ID'] ?>, selectedScore: null, init() { setTimeout(() => { if (!this.wasShown()) { document.getElementById('nps-widget').style.display = 'flex'; this.markShown(); } }, <?= (int)$arResult['SURVEY']['SHOW_DELAY'] * 1000 ?>); document.querySelectorAll('.nps-score').forEach(btn => { btn.addEventListener('click', e => { this.selectScore(parseInt(e.target.dataset.score)); }); }); }, selectScore(score) { this.selectedScore = score; document.querySelectorAll('.nps-score').forEach(b => b.classList.remove('selected')); document.querySelector(`[data-score="${score}"]`).classList.add('selected'); document.querySelector('.nps-comment').style.display = 'block'; }, async submit() { if (this.selectedScore === null) return; await fetch('/local/ajax/survey_submit.php', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ survey_id: this.surveyId, answers: { nps_score: this.selectedScore, comment: document.getElementById('nps-comment-text').value, }, sessid: BX.bitrix_sessid(), }), }); document.getElementById('nps-widget').innerHTML = '<p class="nps-thanks">Спасибо за ваш отзыв!</p>'; setTimeout(() => document.getElementById('nps-widget').style.display = 'none', 3000); }, dismiss() { document.getElementById('nps-widget').style.display = 'none'; this.markShown(); }, wasShown() { return !!localStorage.getItem('nps_shown_' + this.surveyId); }, markShown() { localStorage.setItem('nps_shown_' + this.surveyId, Date.now()); }, }; NPS.init(); </script> 

טריגרים להצגה

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

const SurveyTriggers = { exitIntent(callback) { document.addEventListener('mouseleave', e => { if (e.clientY <= 0) callback(); }, {once: true}); }, scrollDepth(percent, callback) { const listener = () => { const scrolled = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100; if (scrolled >= percent) { window.removeEventListener('scroll', listener); callback(); } }; window.addEventListener('scroll', listener); }, afterOrder(callback) { if (window.location.href.includes('/order/success/')) { setTimeout(callback, 2000); } }, }; 

הטריגרים מוגדרים בנפרד לכל סקר וניתן לשלב אותם. לדוגמה, סקר אחרי הזמנה Bitrix מופיע אחרי רכישה מוצלחת, בעוד שסקר כוונת יציאה Bitrix מופעל כשעוזבים את העמוד. כדי למנוע תגובות כפולות, אנו משתמשים ב-localStorage/cookie למשתמשים אנונימיים ובודקים לפי user_id למשתמשים מחוברים — זה מבטל כפילויות.

ניתוח תגובות

עבור NPS, חשבו אוטומטית את הקטגוריה של מקדמים, פסיביים ומקטרגים:

class NpsAnalytics { public static function calculate(int $surveyId): array { $responses = SurveyResponseTable::getList([ 'filter' => ['SURVEY_ID' => $surveyId], 'select' => ['ANSWERS_JSON'], ])->fetchAll(); $detractors = 0; // 0–6 $passives = 0; // 7–8 $promoters = 0; // 9–10 $total = 0; foreach ($responses as $r) { $answers = json_decode($r['ANSWERS_JSON'], true); $score = (int)($answers['nps_score'] ?? -1); if ($score < 0) continue; $total++; if ($score <= 6) $detractors++; elseif ($score <= 8) $passives++; else $promoters++; } if ($total === 0) return ['nps' => 0, 'total' => 0]; $nps = round(($promoters / $total - $detractors / $total) * 100); return [ 'nps' => $nps, 'total' => $total, 'promoters' => $promoters, 'passives' => $passives, 'detractors' => $detractors, ]; } } 

תהליך פיתוח סקר שלב אחר שלב

1. ניתוח והסכמה — הגדירו מטרות (NPS, CSAT, מחקר), בחרו טריגרים וסוגי שאלות.
2. עיצוב HL-block — צרו טבלאות דרך ממשק ה-API של המיגרציות, הגדירו שדות.
3. יישום רכיב — כתבו תבניות וידג'ט, הגדירו מטפלי AJAX.
4. שילוב טריגרים — הוסיפו אירועי יציאה, גלילה, אחרי הזמנה.
5. בדיקות וניפוי — בדקו בדפדפנים שונים, פתרו קונפליקטים.
6. השקה ואנליטיקה — ספקו דשבורד עם מדדי NPS, CSAT, המרות.

לאורך כל תהליך פיתוח הסקר Bitrix הזה, אנו מבטיחים איסוף משוב Bitrix חלק.

מה כלול בעבודה

כשאתם מזמינים פיתוח סקר במפתח מלא, אנו מספקים:

• הגדרת HL-block ומיגרציות
• פיתוח רכיבים (NPS, CSAT, מותאם אישית)
• יישום טריגרים והגנה מפני כפילויות
• שילוב אנליטיקה (מונה NPS, דוחות סיכום)
• תיעוד API ותצורה
• גישה לריפוזיטורי וסביבת בדיקות
• 30 ימי תמיכה טכנית אחרי ההשקה

למה HL-blocks עדיפים על בלוקי מידע?

Highload-blocks הם טבלאות עם קבוצה שרירותית של שדות. בלוקי מידע מיועדים למילוי תוכן, בעוד ש-HL-blocks מיועדים לשאילתות מהירות עם עומס מינימלי. לסקרים, מהירות כתיבה ללא אירועים מיותרים היא קריטית. טבלת השוואה:

לוחות זמנים ותנאים

לוחות הזמנים תלויים במורכבות: וידג'ט פשוט — מיומיים, סקר מלא — עד 14 ימים. העלות מחושבת בנפרד, אבל מחירים טיפוסיים מתחילים מ-$500 לוידג'ט NPS פשוט ועד $2000 לסקר מלא עם הסתעפות וטריגרים מרובים. ההחזר מתרחש בתוך החודש הראשון בזכות איסוף נתונים אוטומטי וזיהוי בעיות בזמן. אנו מסתמכים על HL-blocks — כלי Bitrix סטנדרטי שמבטיח תאימות לעדכונים. הניסיון שלנו של 10+ שנים ויותר מ-50 פרויקטים מיושמים מאשר את יציבות הפתרונות. קבלו ייעוץ למשימה שלכם — נעריך את ההיקף ללא לוחות זמנים נוקשים. הזמינו פיתוח סקר — ובתוך חודש תראו את ה-NPS הנקי של העסק שלכם.