هل تريد ربط Google Tag Manager على متجر Shopify الخاص بك؟ تتضمن هذه المقالة الخطوات والأكواد التي ستحتاج إليها لإضافة Google Tag Manager وإرسال أحداث الشراء إلى ( Google Analytics 4 ( GA4.
كيفية إنشاء حساب على جوجل تاج مانجر
فى البداية ستذهب إلى هذا الرابط ومن خلاله ستقوم بالتسجيل بحساب الـ Gmail الخاص بك فى GTM أو Google Tag Manager، بعدها ستقوم بأختيار حساب الـ Gmail الذى تريد أن يظهر به حساب جوجل تاج مانجر.
ستظهر أمامك هذه الشاشة ومن خلالها ستقوم باختيار Create Account أو إنشاء حساب.
بعد الضغط عليها ستظهر أمامك هذه الشاشة ستقوم بكتابة أسم الحساب، يفضل كتابة اسم الموقع فى هذه الخانة ” Account Name ” وبعدها ستختار الدولة التي يستهدفها الموقع، هذا الاختيار مهم لأنه سيرسل الأحداث على حسب التوقيت الزمنى للدولة التابع لها موقعك.
ستقوم بإضافة موقعك الإلكتروني وبعدها ستقوم بأختيار Web فى حالتنا، لأننا نريد أن نقوم بتتبع الأحداث لمتجرك، ثم تضغط على Create أو إنشاء.
بعد الموافقة على شروط جوجل ستظهر لك هذه الشاشة
كيف تقوم بتثبيت كود GTM داخل متجر شوبيفاي الخاص بك
ستقوم بالدخول إلى متجرك بعدها ستذهب إلى Online Store، ثم تختار Themes ثم من Actions ستقوم باختيار Edit code.
ثم ستقوم باختيار Theme.liquid تمامًا كما موضع فى الصورة بالأسفل.
فى الخطوة القادمة سنقوم بإضافة الكود الخاص بك في جوجل تاج مانجر وايضًا سنقوم بإضافة كود إضافي يسمى Data layer وعن طريق هذا الكود سيقوم جوجل تاج مانجر بتجميع كل المتغيرات التى تحدث أثناء عملية الشراء.
بعد علامة <head> ستقوم بإضافة كود الـ Date Layer وهو كود ثابت يمكنك استخدامه على كل متاجرك على شوبيفاي
<!– Google Tag Manager –>
<script>
window.dataLayer = window.dataLayer || [];
</script>
بعدها ستقوم بإضافة كود جوجل تاج مانجر الخاص بك، كما هو موجود فى الصورة فى الأعلى، وبعدها تضغط على save.
كيف تقوم باضافة جوجل تاج مانجر Data Layer في صفحة تأكيد الطلب بشوبيفاي
ستقوم بالذهاب إلى settings، ستظهر لك هذه الشاشة كما موضح بالأسفل، وستقوم بأختيار checkout.
بعدها ستقوم بالذهاب إلى Order status page، وهذا المكان يساعدك فى إضافة أكواد التتبع فى اخر صفحة يذهب إليها اليوزر الخاص بك.
ستقوم بإضافة هذا الكود فى الجزء الخاص بـ Order status page
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
{% if first_time_accessed %}
dataLayer.push({
event: “purchase”,
ecommerce: {
transaction_id: “{{ order.order_number }}”,
value: {{ total_price | times: 0.01 }},
tax: {{ tax_price | times: 0.01 }},
shipping: {{ shipping_price | times: 0.01 }},
currency: “{{ order.currency }}”,
items: [
{% for line_item in line_items %}{
item_id: “{{ line_item.product_id }}”,
item_name: “{{ line_item.title | remove: “‘” | remove: ‘”‘ }}”,
currency: “{{ order.currency }}”,
price: {{ line_item.final_price | times: 0.01 }},
quantity: {{ line_item.quantity }}
},{% endfor %}
]
}
});
{% endif %}
</script>
<!– Google Tag Manager –>
<script>(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-EXAMPLE’);</script>
<!– End Google Tag Manager –>
بعد إضافة هذا الكود كما فى الصورة ستقوم بتبديل كود التتبع المظلل كما فى الصوره بكود التتبع الخاص بكل فى جوجل تاج مانجر والذي يظهر كما فى الصورة فى الأسفل.
كيف تقوم بربط GA4 بجوجل تاج مانجر
ستقوم بالدخول على جوجل تاج مانجر GTM مرة أخري وستقوم بالضغط على Add New Tag بعدها ستظهر هذا الشاشة الموجودة بالأسفل.
ستقوم بكتابة أسم الـ TAG كما هو موضح بأسم Google Analytics | GA4 | Purchase وبعدها تضغط على Tag Configuration وتقوم بأختيار Google Analytics GA4 Configuration
ستظهر لك هذه الشاشة، قم بوضع كود جوجل انلاتيكس الخاص بك فى خانة MEASUREMENT ID، وستجد هذا الكود عند الدخول إلى GA4 وبعدها ستقوم بالضغط على Admin ثم تقوم باختيار Data Streams، وبعدها تقوم بالضغط على الدومين الخاص بك سيظهر لك رابط التتبع فى الاعلى كما فى الصورة.
وبعدها تضغط على Triggering وتختار All Pages كما فى الصورة.
ثم تضغط على Save ثم Publish
كيفية اضافة المتغيرات الخاصة بعمليات الشراء داخل جوجل تاج مانجر
فى هذه الخطوة سنقوم باضافة المتغيرات التى نريد ارسال تفاصيلها إلى GA4 و سنقوم بتحميل ملف جاهز به الاكواد البرمجية التي يحتاجها GTM لتجميع البيانات وإرسالها إلى GA4.
فى البداية ستذهب إلى Admin ثم تقوم بأختيار Import Container
بعدها ستظهر أمامك هذه الشاشة وستقوم باضافة الخطوات الموجودة فى الاسفل
ستقوم بتحميل هذا الملف” الرابط ” واضافته فى خانة Choose container file، وبعدها ستضغط على Existing وذلك لأختيار الـ workspace الخاصة بك ستجدها بإسم Default workspace، وبعدها ستقوم باختيار Merge.
ستظهر معك الشاشة بالشكل التالى ثم تضغط على Confirm.
بعد الذهاب إلى Tags ستظهر جميع المتغيرات والأكواد التى تمت إضافتها بواسطة الملف الذي قمنا برفعه على جوجل تاج مانجر.
إذا قمت بالذهاب الى خانة Triggers ستجد الأهداف التى تم وضعها عندما يقوم بها اليوزر سيرسله جوجل تاج مانجر على أنه حدث وستجد ارقامه لديك فى GA4.
عند الذهاب إلى خانة Variables ستجد المتغيرات التى سيتم إرسالها إلى GA4.
الأن يتبقى خطوة واحدة وهو أختيار GA4 Configuration – Pageview داخل الـ Tags الذى قمنا بإضافتها.
ستقوم بالضغط على ال TAG الموجود بإسم Google Analytics | GA4 | Purchase وستقوم بأختيار الـ Tag الخاص بـ GA4 كما فى الصورة.
وهكذا فى الـ TAG الموجود بأسم Add To Cart ثم تضغط submit ثم Publish.
وبذلك سنكون انتهينا من إعدادات الربط بين جوجل تاج مانجر وشوبيفاي، وارسال البيانات إلى جوجل انلاتيكس 4 الجديد، اذا كان لديك اي استفسار اكتبه في التعليقات.
SEO Manager داخل شركة سيو صح، أحب مساعدة الجميع، ونصيحتى لك قدرتك على حل أى مشكلة دون الخوف من المواجهة ستصل بك إلى أبعد مكان ممكن.
