יצירת פיקסל מותאם אישית של Google Tag Manager
אפשר להשתמש ב-Google Tag Manager (GTM) כפיקסל מותאם אישית כדי לנהל את הפיקסלים של צד שלישי.
כשתהיה מוכן לבדוק את הפיקסל המותאם אישית מסוג GTM, השתמש ב-Shopify Pixel Helper כדי לוודא שכל האירועים שאחריהם ברצונך לעקוב מתווספים לארגז החול ללא שגיאות.
אפשר גם להשתמש בתוסף הדפדפן Google Tag Assistant כדי לבדוק אילו תגים של Google נטענים בדף. עם זאת, התכונה Troubleshoot tag של Google Tag Assistant אינה תואמת לפיקסלים מותאמים אישית, ואינה מזהה תגים של Google בתוך פיקסל מותאם אישית, או פיקסלים אחרים שנטענים על ידי GTM.
בדף זה
הכנה ליצירת פיקסל מותאם אישית
לפני שתיצור פיקסל מותאם אישית באמצעות Google Tag Manager, עיין במידע הבא כדי לוודא שאתה מבין כיצד להגדיר את הפיקסל שלך:
- עליך ליצור או לפתוח חשבון Google Tag Manager ולקבל את מזהה המכולה (Container ID) של GTM.
- מטעמי אבטחה, מנהלי תגים שנטענים בארגז החול שלנו כפופים לאותן הגבלות כמו כל פיקסל אחר. למידע נוסף על מגבלות ארגז החול של פיקסלים.
יצירת פיקסל מותאם אישית של Google Tag Manager
אפשר ליצור פיקסל מותאם אישית של Google Tag Manager כדי לנהל את הפיקסלים של צד שלישי.
שלבים:
- פתח את חשבון ה-Google Tag Manager שלך, ובחר בחשבון שעבורו תרצה להגדיר פיקסל מותאם אישית.
- לחץ על מנהל מערכת (Admin), ולאחר מכן לחץ על התקנת Google Tag Manager כדי לפתוח את קוד ההתקנה.
- העתק את בלוק הקוד ששייך לקטע ה-
headבדף. - הסר את תגי ה-HTML מבלוק הקוד. לדוגמה,
<script></script>. - הזן את הקוד שנותר בתוך פיקסל מותאם אישית של Shopify חדש.
- הרשמה לאירועי לקוח ודחיפתם לשכבת הנתונים (dataLayer) של GTM.
- כדי לראות כיצד הקוד אמור להופיע, עיין בדוגמה של פיקסל מותאם אישית של Google Tag Manager.
- הגדרת Google Tag Manager לקבלת אירועים מהפיקסל המותאם אישית שלך.
- אופציונלי: אם יש לך קריאות
dataLayer.push(event) קיימות בקובץcheckout.liquid, החלף אותן ב-analytics.publish().
הרשמה לאירועי לקוח ודחיפתם לשכבת הנתונים של GTM
אפשר להירשם לאירועי לקוח באמצעות ה-dataLayer של GTM בקוד הפיקסל המותאם אישית שלך.
כברירת מחדל, קיים אוסף של אירועים סטנדרטיים שאפשר להירשם אליהם. עם זאת, אם ברצונך לעקוב אחר אירועי לקוח שאינם חלק מההיצע של האירועים הסטנדרטיים, תוכל לפרסם אירועים מותאמים אישית משלך מתוך קובצי תבניות Liquid.
להלן דוגמה להרשמה לאירוע הסטנדרטי "product_viewed", המציין מתי מישהו צופה במוצר. כשהאירוע מופעל, הוא נדחף אל ה-dataLayer.
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
product_title: event.data?.productVariant?.title,
});
});בדוגמה זו, כותרת המוצר מועברת במטען הייעודי (payload) של האירוע. אפשר להשתמש במשתנה של Google Tag Manager כדי ללכוד את כותרת המוצר מהמטען הייעודי של האירוע בתג המועדף עליך.
דוגמה לפיקסל מותאם אישית של Google Tag Manager
הדוגמה שלהלן היא גרסה פשוטה של פיקסל מותאם אישית של Google Tag Manager, המציגה כיצד לשלוח נתונים ל-Google Tag Manager. כדי לדחוף אירועים נוספים אל ה-dataLayer שלך, תוכל להירשם לאירועים סטנדרטיים ומותאמים אישית נוספים.
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');
//Google Consent Mode v2
gtag('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});
//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_shipping_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_address_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_contact_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_started", (event) => {
window.dataLayer.push({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
});
});
analytics.subscribe("cart_viewed", (event) => {
window.dataLayer.push({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});
analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});
analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});
analytics.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
event: "collection_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
collection_id: event.data?.collection?.id,
collection_title: event.data?.collection?.title,
});
});הגדרת Google Tag Manager לקבלת אירועים מהפיקסל המותאם אישית שלך
לאחר יצירת הפיקסל המותאם אישית, יש להגדיר את Google Tag Manager כך שיקבל אירועים מהפיקסל המותאם אישית. כדי לעשות זאת, דרושים תג, טריגר ומשתני dataLayer ב-Google Tag Manager.
הטבלה הבאה מציגה כמה דוגמאות לאירועי לקוח סטנדרטיים נבחרים ולמקבילות שלהם ב-Google Tag Manager:
| אירוע Shopify | טריגר | אירוע GTM |
|---|---|---|
| payment_info_submitted | שליחת פרטי תשלום | add_payment_info |
| checkout_address_info_submitted | שליחת פרטי שילוח | add_shipping_info |
| product_added_to_cart | הוספת פריט לסל הקניות | add_to_cart |
| checkout_started | תחילת תשלום | begin_checkout |
| checkout_completed | סיום תשלום | purchase |
| product_removed_from_cart | הסרת פריט מהסל | remove_from_cart |
| cart_viewed | צפייה בסל הקניות | view_cart |
| product_viewed | צפייה בדף פרטי מוצר | view_item |
| collection_viewed | צפייה ברשימת פריטים | view_item_list |
פרמטרי האירוע של התג ב-GTM חייבים להיות תואמים למוסכמות מתן השמות הצפויות כדי שאירועי ה-dataLayer של הפיקסל המותאם אישית שלך יעובדו.
להלן כמה דוגמאות למאפייני אירוע dataLayer נבחרים של הפיקסל המותאם אישית ולפרמטרי האירוע המקבילים להם ב-Google Analytics 4 (GA4):
אירועי dataLayer של פיקסל מותאם אישית | פרמטרי אירוע של GA4 |
|---|---|
| event.data?.checkout?.currencyCode | currency |
| event.data?.checkout?.totalPrice?.amount | value |
| event.data?.checkout?.order?.id | transaction_id |
| event.data?.checkout?.discountAllocations | coupon |
| event.data?.checkout?.shippingLine?.price?.amount | shipping |
| event.data?.checkout?.totalTax | tax |
| event.data?.checkout?.lineItems | items |
להלן דוגמה המשתמשת באירוע checkout_completed הבא:
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
price: event.data.checkout.totalPrice.amount,
shippingLine: event.data.checkout.shippingLine.price.amount,
totalTax: event.data.checkout.totalTax,
});
});הטריגר ב-Google Tag Manager הוא סוג אירוע מותאם אישית ששם האירוע שלו הוא checkout_completed. השדה שם אירוע בטריגר חייב להיות תואם למפתח ה-event (אירוע) בפיקסל המותאם אישית שלך.
orderId ו-currency הם המשתנים שבהם נעשה שימוש ב-Google Tag Manager כדי לתעד את הנתונים מהאירוע. ניתן למפות אותם למשתנה dataLayer ב-Google Tag Manager. כל משתנה אירוע דורש משתנה dataLayer משלו. יש להגדיר את הטריגר להפעלה בכל האירועים המותאמים אישית.
יש ליצור תג המשתמש בטריגר שכרגע יצרת. תחת פרמטרי אירוע, יש להוסיף את המשתנים שברצונך לתעד. בדוגמה שלמעלה, orderId, currency, price, shippingLine ו-totalTax יוגדרו כמשתני dataLayer. בכל פעם שהתג יופעל, הוא יתעד את משתני ה-dataLayer האלה יחד עם האירוע.
לתשומת לבך, חייבים להיות לפחות תג אחד וטריגר אחד מוגדרים ב-Google Tag Manager כדי שתתבצע העברת נתונים.
החלפת קריאות ישנות של dataLayer.push(event) ב-analytics.publish()
אם הגדרת בעבר את Google Tag Manager, יש להחליף את קריאות ה-dataLayer.push בקריאות ל-Shopify.analytics.publish(). קריאות ה-dataLayer.push נמצאות בקובצי ה-theme.liquid, במקטע פריסה של עורך ערכות הנושא שלך.
כמו כן, יש להחליף את קריאות ה-dataLayer.push ב-checkout.liquid. עם זאת, מכיוון שהקובץ checkout.liquid אינו תואם ל-Shopify Extensions, יש להשתמש בהרחבת ממשק משתמש כדי לדחוף נתונים לפיקסלי אינטרנט.
להלן דוגמה פשוטה לאירוע מותאם אישית של הרשמה בדוא"ל שעוקבים אחריו באמצעות dataLayer בקובצי theme.liquid:
<script>
dataLayer.push({ event: 'email_signup', email: customer.email });
</script>המקבילה ב-Shopify מוצגת באופן הבא, שדוחף את הנתונים לפיקסל המותאם אישית שלך:
<script>
Shopify.analytics.publish('email_signup', {email: customer.email });
</script>לאחר מכן, בתוך קוד הפיקסל המותאם אישית עליך להוסיף קוד דומה לזה:
analytics.subscribe("email_signup", (event) => {
window.dataLayer.push({
'event': 'email_signup',
'email': event.customData.email,
});
});החלף את הפקודה הישנה dataLayer.push(data)
ל-Google Tag Manager יש תכונה המאפשרת לך לדחוף אובייקט dataLayer מבוסס מצב (stateful) בכל אירוע. למרות שסביבת ארגז החול לפיקסלים של Shopify לא כוללת תכונה מקבילה, תוכל להשיג את אותה התוצאה על-ידי יצירת אובייקט נתונים משלך והעברתו אל אירועים מותאמים אישית.
לדוגמה, הגדר אובייקט “customData” לפני הפרסום של כל אירוע מותאם אישית:
<script>
const customData = {email: customer.email}
</script>לאחר מכן, בכל פעם שתרצה לכלול את הנתונים המותאמים אישית שלך, העבר אותם אל מתודת ה-publish שלך:
<script>
Shopify.analytics.publish('email_signup', customData);
</script>טיפים להגדרת Google Analytics 4
כדאי לעיין בטיפים הבאים להגדרת Google Analytics 4 (GA4) כאשר משתמשים ב-Google Tag Manager כפיקסל מותאם אישית.
כתובות URL נקיות יותר לדפים
כאשר GA4 פועל בארגז חול, ייתכן שתשים לב שכתובות ה-URL של הדפים כוללות מידע על ארגז החול שבו הוא פועל. אם תרצה להסיר את פרטי ארגז החול מאותן כתובות URL, תוכל לכבות את המעקב האוטומטי אחרי דפים של GA4 ולהטמיע מעקב משלך במקום זאת, על ידי שימוש באירוע הסטנדרטי page_viewed.
analytics.subscribe('page_viewed', (event) => {
window.dataLayer.push({
'event': 'page_viewed',
'page_location': event.context.window.location.href,
'page_title': event.context.document.title,
});
});לאחר פרסום האירוע שלך אל dataLayer, תוכל ליצור תג page_view של GA4 שמופעל על-ידי האירוע page_viewed. לרוב, תוכל להשתמש בסוג התג Google Analytics: GA4 Event ולהגדיר את שם האירוע ל-page_view. לאחר קביעת סוג התג ושם האירוע, עליך להוסיף פרמטר עבור page_location ולהגדיר את הערך לאותו ערך שהעברת אל ה-dataLayer מהפיקסל המותאם אישית שלך.
מדידה משופרת
כאשר טוענים את GA4 בתוך סביבת ארגז החול לפיקסלים של Shopify, אירועים מסוימים שבדרך כלל מזוהים אוטומטית יצטרכו להיות מוגדרים באופן ידני. לדוגמה, קליקים על קישורים יוצאים, כחלק מהגדרת 'מדידה משופרת' ב-GA4, אינם יכולים לפעול באופן אוטומטי מסיבות אבטחה בעת שימוש בפיקסלים מותאמים אישית. עם זאת, אפשר להטמיע את אירועי המדידה המשופרת של GA4 בעצמך בתור אירועים מותאמים אישית.
הקוד שמופיע למטה כולל דוגמה פשוטה למעקב אחרי קליקים על קישורים יוצאים:
<script>
function detectOutboundLink() {
// add your logic for determining if a link click is outbound
// if the link click is outbound then publish it
if (isOutboundLink) {
Shopify.analytics.publish('outbound_link', { link_url: link_url });
}
}
</script>בסיום, צור תג GA4 ב-GTM ששולח את הקליק על הקישור אל GA4, על ידי וידוא ששם האירוע הוא click, כך שיתאים אל השמות של אירועי המדידה המשופרת ב-GA4.
תוכל להשיג את אותו המעקב עבור כל אחד ממדדי 'מדידה משופרת' של Google.
בדיקה ואיתור באגים בפיקסל המותאם אישית
כשתהיה מוכן לבדוק את הפיקסל המותאם אישית מסוג GTM, השתמש ב-Shopify Pixel Helper כדי לוודא שכל האירועים שאחריהם ברצונך לעקוב מתווספים לארגז החול ללא שגיאות.
אפשר גם להשתמש בתוסף הדפדפן Google Tag Assistant כדי לבדוק אילו תגים של Google נטענים בדף. עם זאת, התכונה Troubleshoot tag של Google Tag Assistant אינה תואמת לפיקסלים מותאמים אישית, ואינה מזהה תגים של Google בתוך פיקסל מותאם אישית, או פיקסלים אחרים שנטענים על ידי GTM.