יצירת קוד לפיקסל מותאם אישית
דף זה כולל הוראות ליצירת קוד פיקסל מותאם אישית עבור פיקסל של צד שלישי, כך שתוכל לעקוב אחר אירועי לקוח מסוימים. לאחר שתיצור את הקוד לפיקסל המותאם אישית שלך, תוכל להוסיף את הפיקסל לחנות Shopify שלך.
הכנה ליצירת פיקסל מותאם אישית
לפני שתיצור פיקסל מותאם אישית, עיין במידע הבא כדי לוודא שאתה מבין כיצד להגדיר את הפיקסל שלך:
- סיכונים הקשורים לפיקסלים.
- מגבלות ארגז החול לפיקסלים של Shopify.
- שימוש ב-API של ארגז החול לפיקסלים של Shopify.
- סכימה למעקב אחר אירועי לקוח.
בעת הוספת פיקסל מותאם אישית, אתה מציין את המידע הבא:
- פיקסל ה-JavaScript של צד שלישי.
- האירועים ההתנהגותיים שברצונך לעקוב אחריהם.
- הגדרות הסכמת הפרטיות של הלקוח.
יצירת הקוד לפיקסל מותאם אישית
יצירת הקוד לפיקסל מותאם אישית כוללת את השלבים הבאים:
- הכנת ה-SDK של ה-Javascript של צד שלישי.
- הגדרת הפיקסל שלך ל-מעקב אחר אירועי לקוח.
- הגדרת הגדרות הסכמה לפרטיות לקוחות עבור הפיקסל שלך.
הכנת ה-SDK של ה-Javascript של צד שלישי
שירות הצד השלישי שאתה עובד איתו מספק לך את הקוד המשולב בפיקסל. לפיקסל יש בדרך כלל שני רכיבים: SDK של Javascript וקוד מעקב. יש להסיר כל קוד HTML מקוד שירות הצד השלישי, מאחר שארגז החול לפיקסלים של Shopify תומך ב-JavaScript בלבד.
להלן דוגמה לפיקסל של Meta. פיקסלים יהיו שונים במקצת בין צד שלישי אחד למשנהו.
<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->לאחר הסרת ה-HTML מהקוד של Meta, תישאר עם ה-SDK לפיקסלים של Meta ועם קוד לאתחול שלו. גם קוד המעקב אחר אירועי PageView הוסר, מכיוון שהוא יתווסף בשלב הבא.
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);ה-SDK לפיקסלים של Meta אינו משדר נתונים באופן אוטומטי מפיקסל מותאם אישית של Shopify. כדי לשדר נתונים, עליך להירשם לאירועים.
ייתכן שתיתקל בפיקסלים הנטענים באמצעות script src=. אין תמיכה ב-HTML בפיקסלים של Shopify, לכן יהיה עליך להחליף את script src= בחלופת ה-JavaScript המקבילה.
הנה דוגמה לפיקסל של Google Analytics שנטען באמצעות script src=:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', ''YOUR_PIXEL_ID'');
</script>ניתן להחליף את החלק script src= בחלופת ה-JavaScript המקבילה. ודא תמיד שמאפיין ה-src שלך תואם לגרסת ה-HTML:
const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');ה-SDK לפיקסלים של Google אינו משדר נתונים באופן אוטומטי מפיקסל מותאם אישית של Shopify. כדי לשדר נתונים, עליך להירשם לאירועים.
מעקב אחר אירועי לקוח
לאחר טעינה ואתחול של ה-SDK של הפיקסל, עליך להעביר אליו אירועים למעקב. פעולה זו מתבצעת על ידי הרשמה לאירועים, ולאחר מכן העברת נתוני האירועים אל ה-SDK של הפיקסל כדי שיעובדו על ידי שירות הצד השלישי.
הרשמה לאירועים סטנדרטיים
Shopify מציעה מערך סטנדרטי של אירועים, המקל לוודא שהפיקסל שלך אוסף את הנתונים הדרושים לו.
ניתן להירשם לאירועים באמצעות Shopify Pixels Extension API. תצטרך למקם את קוד פיקסל הצד השלישי בתוך האירוע שאליו אתה נרשם.
זוהי דוגמה לאירוע PageView עבור הפיקסל של Meta. שים לב ש-fbq("track") הוא חלק מהקוד של Meta, ולכל חברה תהיה גרסה משלה שתצטרך לעיין בתיעוד שלה לגביה.
analytics.subscribe("page_viewed", async (event) => {
fbq('track', 'PageView');
});לאירועים מסוימים יש מטא נתונים שניתן להעביר אל הפיקסל. הנה דוגמה להעברת כמה פרטי מוצר לאירוע ViewContent של Meta:
analytics.subscribe("product_viewed", async (event) => {
fbq('track', 'ViewContent', {
content_ids: [event.data?.productVariant?.id],
content_name: event.data?.productVariant?.title,
currency: event.data?.productVariant?.price?.currencyCode,
value: event.data?.productVariant?.price.amount,
});
});הרשמה לאירועי לקוח מותאמים אישית
אם תרצה לעקוב אחר אירועי לקוח נוספים, כגון כאשר מישהו לוחץ על לחצן, תוכל להוסיף אירועי לקוח מותאמים אישית. ניתן להירשם לאירועים מותאמים אישית באותו אופן כמו לאירועים סטנדרטיים. יש להצהיר על שם האירוע שאליו ברצונך להירשם, ולהעביר את המידע לפיקסל של ספק שירות הצד השלישי.
זוהי דוגמה לאופן שבו אירוע מותאם אישית שפורסם עשוי להופיע בקובצי ה-Liquid של ערכת הנושא שלך:
<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>זוהי דוגמה לאופן שבו תוכל להגדיר את הפיקסל שלך להירשם לאותו אירוע מותאם אישית:
analytics.subscribe("special_email_signup", event => {
window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});למידע נוסף על אירועים מותאמים אישית, עיין ב-תיעוד למפתחים של Shopify.
הגדרת הסכמה והגדרות של מכירת נתונים
בשווקים שמוגדרים כך שהם דורשים הסכמה, כגון האזור הכלכלי האירופי (EEA) ובריטניה, פיקסלים של אינטרנט יפעלו רק כאשר מבקרים באתר האינטרנט סיפקו את ההרשאות הדרושות בהגדרות הפיקסל.
כברירת מחדל, פיקסלים מותאמים אישית חדשים דורשים הרשאות שיווק ו-אנליטיקה. אפשר להתאים אישית אילו הרשאות יידרשו בסעיף פרטיות הלקוח > הרשאה בפרטי הפיקסל המותאם אישית.
באופן דומה, פיקסלים המוגדרים כמכירת נתונים לא יפעלו עבור לקוחות שבחרו שלא לאשר מכירה או שיתוף של נתונים, אלא אם כן הפיקסל תומך בשימוש מוגבל בנתונים. כברירת מחדל, פיקסלים מותאמים אישית חדשים מוגדרים כמכירת נתונים. אפשר להתאים אישית אם הנתונים שנאספים ייחשבו כמכירת נתונים דרך הסעיף פרטיות הלקוח > מכירת נתונים בפרטי הפיקסל המותאם אישית.
מפתחים של פיקסלים מותאמים אישית יכולים לקבל מידע נוסף על איסוף ורישום של הסכמות.
לכל פיקסל עשוי להיות שם שונה עבור כל מטרה. מומלץ לעיין בתיעוד הפיקסל של הצד השלישי כדי להבין כיצד הוא ממופה להגדרות של Shopify.
לדוגמה, כך ממופות מטרות השיווק והאנליטיקה ל-Consent Mode (מצב ההסכמה) של Google:
gtag('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});דוגמה לפיקסל מותאם אישית
להלן דוגמה לקוד עבור פיקסל של Meta. קוד הפיקסל משתנה בהתאם לספק השירות של צד שלישי ולאירועים שאחריהם ברצונך לעקוב. לרשימת האירועים הזמינים, אפשר לעיין בהפניה בנושא אירועי לקוח.
דוגמה לפיקסל מותאם אישית של Meta
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);
// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
fbq('track', 'PageView');
});
analytics.subscribe("product_viewed", (event) => {
fbq('track', 'ViewContent', {
content_ids: [event.data?.productVariant?.id],
content_name: event.data?.productVariant?.title,
currency: event.data?.productVariant?.price.currencyCode,
value: event.data?.productVariant?.price.amount,
});
});
analytics.subscribe("search_submitted", (event) => {
fbq('track', 'Search', {
search_string: event.searchResult.query
});
});
analytics.subscribe("product_added_to_cart", (event) => {
fbq('track', 'AddToCart', {
content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
});
});
analytics.subscribe("payment_info_submitted", (event) => {
fbq('track', 'AddPaymentInfo');
});
analytics.subscribe("checkout_started", (event) => {
fbq('track', 'InitiateCheckout');
});
analytics.subscribe("checkout_completed", (event) => {
fbq('track', 'Purchase', {
currency: event.data?.checkout?.currencyCode,
value: event.data?.checkout?.totalPrice?.amount,
});
});