Code Injection היא הדרך היחידה להוסיף לוגיקה מותאמת אישית ל-Squarespace. בלוקים סטנדרטיים לא מכסים משימות כמו אינטגרציית CRM, מחשבונים מותאמים אישית או אנליטיקה מתקדמת. ראינו את זה עשרות פעמים: לקוח רוצה לאסוף לידים ישירות ב-amoCRM, להגדיר Cookiebot ל-GDPR, או להוסיף ניווט AJAX לחוויית משתמש חלקה. ללא גישה לשרת או לתבנית, Code Injection הופך לכלי העיקרי. בשימוש לא נכון, הוא פוגע ב-Core Web Vitals — LCP יורד בשתי שניות, וסקריפטים מתנגשים עם ווידג'טים מובנים. בואו נחקור כיצד להזריק קוד ללא השלכות.
למה Code Injection היא הדרך היחידה
Squarespace לא מאפשרת עריכת קוד המקור של התבנית. במקום זאת, ישנן ארבע נקודות הזרקה, לכל אחת מאפיינים משלה. בחירת מיקום לא נכון מובילה להתנגשויות או לאובדן ביצועים. לדוגמה, סקריפט שמוצב ב-Header יכול להאט את כל הדפים אם הוא לא עטוף ב-defer או async. קוד ב-Footer לא ירוץ עד שה-DOM נטען במלואו — מתאים רק לווידג'טים אסינכרוניים. בואו נפרק כל נקודה.
נקודות הזרקת קוד
| מיקום | נתיב בפאנל | מטרה | מאפיינים מיוחדים |
|---|---|---|---|
| Header גלובלי | Settings → Advanced → Code Injection → Header | תגי Meta, גופנים, סקריפטים סינכרוניים | מוזרק לתוך <head>, משפיע על כל הדפים |
| Footer גלובלי | Settings → Advanced → Code Injection → Footer | GTM, צ'אטים, סקריפטים אסינכרוניים | לפני </body>, מתאים לווידג'טים |
| Header ברמת דף | Page Settings → Advanced → Page Header Code Injection | סקריפטים ייחודיים לדף אחד | משפיע רק על אותו דף |
| דף נעול / דף אישור הזמנה | סעיפים ייעודיים | דפים מוגנים, דף אישור הזמנה | שדות נפרדים לתרחישים שונים |
איך אנחנו עושים את זה: מקרה בוחן אינטגרציית CRM
מהניסיון שלנו: לקוח סטודיו לעיצוב היה צריך לחבר את amoCRM לאתר Squarespace שלו. המטרה: כשטופס נשלח, הליד צריך להופיע מיידית ב-CRM, והמנהל צריך לקבל התראה בטלגרם. הפתרון שלנו:
- הוספנו סקריפט ב-Footer הגלובלי שמיירט את אירוע
amoCRMעבור הטופס עםsubmitספציפי. - אספנו נתוני טופס דרך
data-form-id, ושלחנו אותם דרךFormDataל-amoCRM REST API. - במקביל קראנו ל-Telegram Bot API לצורך התראה.
הקוד כולו התאים ל-40 שורות; הבדיקות לקחו חצי יום. ללא Code Injection, היינו צריכים לשנות את התבנית או להשתמש בעקיפים. הלקוח צמצם את זמן עיבוד הלידים מ-3 שעות ל-5 דקות — חיסכון של 98% בזמן.
איזה כלי להסכמת עוגיות לבחור?
הבאנר המובנה של Squarespace (זמין בתוכניות Business+) לא מציע כפתור "דחה הכל" — זה מפר את GDPR. Cookiebot, לעומת זאת, נותן שליטה מלאה: משתמשים יכולים להסכים סלקטיבית לקטגוריות עוקבים. אנחנו משתמשים בו ב-9 מתוך 10 פרויקטים. הוא חוסם אוטומטית סקריפטים של צד שלישי עד שניתנת הסכמה ומעדכן את המדיניות כשהרשימה משתנה. לפי תיעוד Cookiebot, הפתרון שלהם מהיר פי 5 להגדרה מאשר באנר שנבנה בהתאמה אישית.
השוואת פתרונות להסכמת עוגיות
| קריטריון | באנר מובנה של Squarespace | Cookiebot | OneTrust |
|---|---|---|---|
| כפתור "דחה הכל" | לא | כן | כן |
| חסימת סקריפטים אוטומטית | לא | כן | כן |
| תוכנית חינמית | כן (מוגבל) | כן (עד 100 דפים) | כן (מוגבל) |
| אינטגרציית Google Consent Mode | לא | כן | כן |
| עלות עבור 50 דפים | כלול בתוכנית | כ-$12 לחודש | $15 לחודש |
תהליך העבודה שלנו
- אנליטיקה — בחינת נקודות הזרקה קיימות, זיהוי התנגשויות עם סקריפטים נוכחיים.
- עיצוב — תכנון ארכיטקטורה: באילו APIs להשתמש, כיצד לטפל בניווט AJAX.
- יישום — קוד ב-JavaScript/CSS, הזרקה דרך Code Injection, בדיקות במצב גלישה אנונימית. בקשו ביקורת Code Injection — נחשוף התנגשויות נסתרות ונשפר ביצועים.
- בדיקות — בדיקת LCP, CLS, INP לאחר ההזרקה; לוודא שסקריפטים לא שוברים את פונקציונליות האתר.
- פריסה — העברת סקריפטים מוגמרים לסביבת הייצור, מתן אחריות תמיכה ל-7 ימים.
מה כלול
- ביקורת נקודות Code Injection קיימות לאיתור התנגשויות.
- פיתוח סקריפטים מותאמים אישית (CSS, JS) תוך התחשבות בניווט AJAX של Squarespace.
- אינטגרציה של GTM, Cookiebot, Yandex.Metrica או כל אנליטיקה אחרת.
- אינטגרציה עם CRM, שיווק במייל, בוטים של טלגרם.
- בדיקות תאימות דפדפנים (Chrome, Safari, Firefox).
- תיעוד לכל סקריפט ואנשי קשר להתאמות עתידיות.
טעויות נפוצות ב-Code Injection
- שימוש ב-
fetch— אסור, גורם לשגיאות. - הוספת jQuery על גבי המובנה — מוביל לכפילות ובעיות ביצועים.
- אי טיפול בניווט AJAX — ווידג'טים מפסיקים לעבוד אחרי מעברי דפים. פתרון: האזנה לאירוע
document.write(). - בקשות XHR סינכרוניות — חוסמות טעינה. השתמשו ב-
squarespace:after-body-renderעםfetch.
מגבלות ופתרונות עוקפים
Squarespace אוסרת על async/await ו-XHR סינכרוני. מודולי ES (document.write()) עובדים, אבל צריך לשים לב לסדר הטעינה. jQuery כבר מובנה בליבה — אל תכללו אותו שוב. עבור פונקציות legacy, השתמשו ב-type="module". אם האתר משתמש בניווט AJAX, זכרו לאתחל מחדש ווידג'טים לאחר אירוע Y.use('node', ...).
לוחות זמנים משוערים
- חיבור GTM ו-Yandex.Metrica — משעתיים.
- ווידג'ט או מחשבון מותאם אישית — מיום עד יומיים.
- אינטגרציית CRM עם יירוט טפסים — מ-3 עד 5 ימים.
- הגירה מלאה של אנליטיקה עם הגדרת Cookiebot — מיום אחד.
התמחור נקבע באופן אישי לפי המשימות הספציפיות שלכם. אנחנו עובדים עם Squarespace למעלה מ-5 שנים והשלמנו יותר מ-50 פרויקטים — יש לנו ניסיון עם דרישות לא סטנדרטיות. קבלו ייעוץ — נספר לכם איך לשפר את האתר שלכם ללא כאב.