5 דקות עבודה להתקין גוגל אנליטיק 4 באתר שופיפיי

תוכן עניינים

מה שנעשה זה

  1. להטמיע קוד בשופיפיי
  2. להפעיל את גוגל טאג מנגר
  3. לסדר את אנליטיק GA4

איך מיצרים גוגל טאג מנגר

הכנס לכאן tagmanager.google.com ותייצר חשבון תואם לאתר שלך (לשים לב מתוך חשבון גימייל אדמיניסטרטיבי לא זה שיש לך מיילים פרטיים או בעלי חשיבות עיסקית)

גוגל טאג מנגר

תן לחשבון שם ולבחור WEB

ימירת חשבון גוגל טאג מנגר GTM

תאשר את הצק בוקס ותלחץ YES

אישור חשבון GTM google tag manager

החשבון מוכן 

תקבל את המסך הבא של טאג מנג׳ר שבו אתם מקבלים את הקוד להטמעת הטאגים מספר 1 ומספר 2 חשובים שיהיו במקומות הנכונים ובשביל שזה יקרה צריך לפתוח את שופיפיי

התקנת גוגל טאג מנגר

נכנסתם לשופיפיי צריך ללכת לחלק של הקוד ולעדכן שם את המערכת

אז בשופיפיי נכנסים ל online store → themes 

לוחצים על החץ מימין ל  Actions  ובוחרים את  Edit Code

התקנת קוד בשופיפיי

החלק הזה צריך להעשות בתשומת לב תדאגו לגיבוי כדי שלא יהיה בלאגן

תעמדו על theme liquid ותמצאו את החלק הראשון של ה head לפני התחלת הפונקציות ותכניסו לשם את הקוד מחלק 1 בתמונה 

הקוד בשופיפיי

בשורה השלישית מתחיל ה head שם תכניסו את הקוד של חלק 1 מהטאג

הטמעת GA4 + GTM גוגל טאג מנגר וגוגל אנליטיק

את החלק השני תכניסו באותו עמוד רק תחת שורה שנקראת <body> בכל תבנית תקבלו אותה במיקום אחר 

אני משתמש פה בתבנית dawn

מיקום הקוד של טאג מנגר בשופיפיי

סימנתי בעיגול שחור את מיקום התג <body> ובריבוע אדום את הקוד של חלק 2

זהו הטמעת את התג מנג׳ר

עכשיו נשאר רק ללחוץ על save ולעשות עוד טיפה עבודה 🙂

ללכת להגדרות בסוף הדף של מערכת הניהול

ההגדרות של המערכת בשופיפיי

להכנס לדף של ה צק אאוט

דף צקאאוט בשופיפיי

להכניס את הקוד של הקונטיינר של התג מנגר גם לשם כך לא תפספסו את הזרימה כולל הדפים של הרכישה וה Thank you

הטמעת זיהוי צקאאוט בשופיפיי

בנוסף תעתיקו את הקוד הזה של הדטאלייר Data Layer מתחת לקוד של האנליטיק

===================================================================

<!– Data Layer Checkout Purchase –>

<script>    

window.dataLayer = window.dataLayer || [];                                            

var shipping_price = '{{shipping_price | money_without_currency }}';

shipping_price  = shipping_price.replace(",", ".");

var total_price = '{{total_price | money_without_currency }}';

total_price  = total_price.replace(",", ".");

var tax_price = '{{tax_price | money_without_currency }}';

tax_price  = tax_price.replace(",", ".");

  var orderItemsName = []            

  var orderItemsPrice = []

  var orderItemsQuantity = []

var orderItemsId = []

  var totalQuantity = 0;

  {% for line_item in line_items %}

      orderItemsName.push( '{{ line_item.product.title | remove: "'" | remove: '"'}}')

      orderItemsPrice.push('{{ line_item.price | times: 0.01 }}');

      orderItemsQuantity.push('{{ line_item.quantity }}');

      orderItemsId.push('{{ line_item.product_id }}');

    totalQuantity +=  {{ line_item.quantity }};

  {% endfor %}

  {% if first_time_accessed %} 

window.dataLayer.push({

'page_type': 'purchase',

'event': 'analyzify_purchase',

'currency': "{{ shop.currency }}",

'totalValue': total_price,

'shipping': shipping_price,

'tax': tax_price,

'payment_type': '{{order.transactions[0].gateway}}',

'transaction_id': "{{order.name}}",

  'productName': orderItemsName,

  'productPrice': orderItemsPrice,

  'productQuantity': orderItemsQuantity,

'productId': orderItemsId,

});

{% endif %}

  </script> 

======================================================================

עכשיו הכנסנו את המידע שיצא כאשר מישהו יגיע לדף רכישה

אנחנו רוצים גם למשוך מידע מתוך דף מוצר 

לכן נייצר סניפט בקוד של שופיפיי לזהות את המידע הזה

ניגש ל קוד של שופיפיי למקום הזה ונלחץ ADD New Snipet

בנית סניפט שופיפיי

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

Analyzify-product-datalayer

עכשיו תעתיק את הקוד מתחת אל הסניפט

========================================================

<script type="text/javascript">

  window.dataLayer = window.dataLayer || [];

  window.appStart = function(){

    {% assign template_name = template.name %} 

    window.productPageHandle = function(){

      var productName = "{{ product.title | remove: "'" | remove: '"' }}";

      var productId = "{{ product.id }}";

      var productPrice = "{{ product.price | money_without_currency }}";

      var productBrand = "{{ product.vendor | remove: "'" | remove: '"' }}";

      var productCollection = "{{ product.collections.first.title | remove: "'" | remove: '"' }}"

      window.dataLayer.push({

        event: 'analyzify_productDetail',

        productName: productName,

        productId: productId,

        productPrice: productPrice,

        productBrand: productBrand,

        productCategory: productCollection,

      });

    };

    {% case template_name %}

    {% when 'product' %}

     productPageHandle()

    {% endcase %}

  }

  appStart();

</script>

==================================================================

כך זה נראה

עכשיו צריך לחזור ל theme.liquid  ולעדכן שם את הקוד שנמצא מתחת לשורה הזו היכן ש תג <head/>

 {% render 'analyzify-product-datalayer.liquid' %}

כמו בתמונה

עכשיו נותר רק לייצר אוביקטים בטאגמנג׳ר כדי לקבל את המידע אמין

יש אפשרות לשלוח לי מייל ולקבל את כל המידע בגיסון אחד מסודר או להטמיע לבד בצורה שכזו

  1. להוסיף את ה variable האלו
    1. dlv-shipping / shipping
    2. dlv-tax / tax
    3. dlv-totalValue / totalValue
    4. dlv-payment_type / payment_type
    5. dlv-currency / currency

אם תבקשו ממני את הקובץ אשלח לכם את המידע הזה שתקבלו בצורה אוטומטית

NameTypeFunction
GA4.01 – All PagesTagGoogle Analytics 4 global configuration tag. It also functions as the "Page View" tag.
GA4.02 – Event – View ItemTagE-commerce event for product page views. It sends the product-level data into GA4 and allows product-level reports to function.
GA4.03 – Event – PurchaseTagCore of all e-commerce reports. It sends order-level and product-level data into GA4 and helps with the attribution.
cEvent – analyzify_productDetailTriggercEvent refers to Custom Event. This custom triggers works on the product detail pages.
cEvent – analyzify_purchaseTriggerPurchase event trigger works on the order completed (aka. "thank you") pages.
GA4 Measurement ID (G-)VariableYour GA4 configuration ID. You need to update this ID once you import the GTM container.
dlv-brandVariableData layer variable for the product brand.
dlv-currencyVariableCurrency of the order.
dlv-productIdVariableProduct's ID.
dlv-productNameVariableProduct's name.
dlv-productPriceVariableProduct's price.
dlv-productQuantityVariableProduct's quantity.
dlv-shippingVariableShipping price value of the order.
dlv-taxVariableTax value of the order.
dlv-totalValueVariableTotal value of the order.
dlv-transaction_idVariableTransaction ID of the order.

פותחים חשבון באנליטיק 4 

או דרך  setup asistant  של הגרסה הישנה של האנליטיק שלכם מספר 2 בתמונה

או יצירת חשבון חדש של אנליטיק 4 בלבד כמו בחץ 1 בתמונה

 בעקרון אחריי שלוחצים על התחל מה GA4 setup הדברים הם פשוטים ודומים

בכל מקרה נכנסים אחרי שנוצר המערכת ל setup asistant  ומשם ל tag instalation

GA4 שופיפיי

מקבלים את המסך הזה 

גוגל אנליטיק 4 שופיפיי

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

גוגל אנליטיק 4 שופיפיי קוד האנליטיק

ואותו מכניסים בטאג מנגר

כדי לעשות זאת ראשית מתקינים טאג חדש

מקבלים את החלון הבא ולוחצים על העיפרון בצד ימין

מקבלים את רשימת הטאגים

בוחרים בGA4 שמסומן באדום ומקבלים את המסך הבא

מאשרים

מקבלים את המסך הבא

לוחצים במרכז

בוחרים All Page

לוחצים על save

שומרים על השם

ואז לוחצים על submit

רוצה לצור קשר לקבל מאמרים על שיווק דיגיטלי ובנית אתרי מסחר

שיתוף ב facebook
Facebook
שיתוף ב twitter
Twitter
שיתוף ב linkedin
LinkedIn