36

كيف تدمج "Google Tag Manager" في صَفَحات "AMP"

في هذا الفيديو سوف أريك كيفيَّة دمج "Google Tag Manager" في تسريع موقع الهاتف المحمول, و يُعرف أيضاً باسم "AMP".هذا و أكثر سأعرضه بعد هذا مباشرةً.موسيقى مُبهجةأهلاً و مرحباً بكم في فيديو جديد من "measureschool.com"حيث نُعلمكم طريقة التسويق الرقمي التي تعتمد على البيانات.أنا جوليان, و في هذه القناه نقوم بنشر استعراضات عن التسويق الرقميمعلومات و خُدع و دروس تعليمية للمُسوِّق الحديث.مثل هذا تماماًإن لم تشترك في القناة بعد, ففكِّر في الاشتراك.حديثاً, أعلن "Google Tag Manager" دعمه لبرنامج "AMP".الآن, "AMP" هي: تحميل صفحات الإنترنت بسرعة كبيرة.و تم كتابتها في شكل مميَّز ليتمكن جوجل من جعلها أسرع في أجهزة الموبايل.لكن منذ أن أزالت معظم "JavaScript" التي تراها عادةً في الصفحات.لم يكن "Google Tag Manager" مناسباً أو لم يتم تثبيته حقاً على صفحات الويب.لكن كل ذلك تغيَّر الآن لأننا نمتلك وعاء خاص يجعلنا ندمج "Google Tag Manager" و الصفحات.لذا, لنلقي نظرة عن كيفيَّة دمج هذا.حسناً, اليوم, رحلتنا تبدأ هنا في "ampproject.org".حيث يمكنك أن تجد معلومات أكثر عن تسريع صفحات الموبايل.إن لم تعرف ما هي بعد, سأوصيك بفيديو عن فريق مطورين "Google chrome".الذى يوضِّح صفحات "AMP" بلغة انجليزية واضحة.لكن عندما تكون مستعداً لإنشاء صفحات موبايل سريعة "accelerated mobile page"يمكنك أن تتوجَّه إلى "ampproject.org".حيث ستجد الوثائق, لكن أيضاً, ستعرض لك بعض الأمثلة عن كيفية إنشاء "accelerated mobile pages" بالتحديد.و بالنسبة إلينا, من المهم جداً البحث في المصادر.و النظر في مُكون "AMP analytics".الآن, هذا المكون هو أساس العملية, كيف انتشر التعقُّب في "accelerated mobile page". و "Google Tag Manager" يستغل هذا المكون أيضاً.لذا, إذا أردت معرفة المزيد في "technical specifics"فقم بفحص هذا النموذج.الآن, اليوم نريد تثبيت "Google Tag Manager" في صفحة موبايل مُسرَّعة.و التي تم أخذها من أمثلة "Accelerated Mobile Project"و تري هنا أنه قام بالتحميل بشكل سريع حقاً.إذا أردت التأكد من أنه "mock-up" صالح حقاًيمكننا دائما إلحاق "#development=1" في "URL"و سيعطينا رسالة في "JavaScript console"أن تثبيت "AMP" كان ناجحاً, أو أن هناك خطأ ما.إذا كيف سنثبِّت "Google Tag Manager" فيها؟حسناً, لنفتح "Google Tag Manager container" أولاً, و ستخنار "AMP" حسب نوع "container" و تم الموافقة مع قصاصتين هنا التي نحتاج لتثبيتهماالآن, القصاصتان محتلفتان عن نسخة الويبمن الملاحظ أننا نستخدم "the AMP Analytic component".نحتاج لتثبيت القصاصتين "snippets".واحدة في قسم "head" و الأخرى في "body section of our mock-up"لنقم بهذا, لننسخ هذا هنا.و لقد فتحت "HTML" للصفحة في مُصحح النص.سأُلصق الكود هنا.و الكود الآخر أسفل "opening body text".لنحفظ هذا و نعُد إلى الصفحة.نعيد تحميل الصفحةو لدينا مجموعة من الأخطاء هنا, و هذا ربما بسبب "container" الجديد.و التي تحتاج لتهيئتها أولاً, لذا, لنقم بهذا بسرعة.و يبدو أننا نقوم بشكل جيد في جانب التثبيت "validation"الآن, "tag assistant" لا زال يعرض أن هناك خطأهذا شيء, أنا لا أعرف حقاً, لماذا يظهر لي هذا الخطألأننا نمتلك حساب "id" غير صالحأنوي غالباً تجاهل "Tag assistant" لصفحات "AMP".لكن, ربما سنُصلحها في نقطة ما.لنلقي نظرة عن كيفيَّة نشر "Google Tag Manager container" الجديد.و ما إذا كانت مثل "web container"لنذهب إلى "tags"ننشيء أوَّل "Google Analytics Tag".يمكننا اختيار نوع "tag" هنا فلدينا "Google Analytics" مُتاح.لكن, إذا مرَّرت لأسفل, ستكون القائمة أقصر قليلاً عن التي نمتلكها في نسخة الويب.و أكثر شيء ملحوظ هو اختفاء خيار "custom HTML" و هذا لأن قبل تعريف الجهات البائعة التي تعمل في مُكون "AMP analytics" في هذه اللحظةو لا يوجد أي طريقة لتثبيت "JavaScript" على الصفحة.إذا أردت امتلاك "custom tag" مُثبَّت, فيجب أن يكون "custom image tag".لنذهب إلى "Universal Analytics" مؤقتاً.و نُدخل "tracking ID"ضَعْ "trigger"و سنذهب إلى "Preview and debug mode".لنُعد تحميل الصفحة, و كل شيء يبدو على ما يرام.أين توجد "Preview and Debug console"؟حسناً, في صفحات "AMP" لا يمكنك فتح "preview and debug console".لكن يظل المتصفِّح في وضع "preview".يتم نشر "tags" عادةً.نحن, فقط لا نملك تأكيداً بصريَّاً من "preview and debug console".سنحتاج لإلقاء نظرة على أدوات خارجيَّة مثل "Tag Assistant"لا زال يُظهر أن هناك خطأ ما.لكن تم نشر "Google Analytics" بشكل واضح.يجب أن نرى هذا أيضاً في تقرير الوقت الحقيقي.أجل, كان هناك "page view" تم توليدها في صفحتنا.يبدو أنه يعمل جيداً.ماذا إن أردنا تثبيت "event tracking" على هذه الصفحة؟ على سبيل المثال في زر "Add to Cart".لنذهب إلى "Google Tag Manager" ثم ننشيء "trigger" جديد.الآن, عندما نفتح قائمة "trigger type"سنرى أنها مختلفة قليلاً عما وجدناه في نسخة الويب.لدينا بعض النقرات"clicks", لكن أين رابط "click trigger"؟لدينا "page views" و لدينا "trigger type" جديد.مثل "scroll and visibility"هذا مثير جداً, لأنه غير متاح في نسخة الويب.لكن ربما في نقطة ما سنجدها أيضاً هناك.لن نكون قادرين على الدخول في "scroll and visibility tracking" اليوم.نحن ننظر فقط في كيفيَّة تطبيق "click tracking" الآن.و نرى أن "click tracking" و التكوين هنا مختلفان عن نسخة الويب أيضاًيمكننا اختيارها عبر "CSS selector" فقط.سنحتاج لمعرفة كيف أن "HTML is mocked up".لنكتشف هذا.نحن نرى هنا "ID" تُسمي "Add to cart" و التي يمكن لما استخدامها في "CSS selector".يجب أن تقوم بهذاو لننشيء "tag" الآن.احفظ هذا كله.عُد إلى وضع "preview and debug"."refresh" هذا, "refresh" صفحتنا.و سأضغط على زر "Add to Cart", ثم اذهب إلى "Analytics"انظر في تقرير الوقت الحالي.و يبدو أنها تتعقَّب جيداً أيضاً على "accelerated mobile page".إذاً, كان هذا : كيف تقوم بتثبيت "click tracking" في "Accelerated mobile page".إذاً, لقد رأينا بالفعل أن "tag" لديها اختلافات, و "triggers" لديها اختلافات أيضاً.و ماذا عن "variables"؟حسناً, "variables" مختلفة جداً عما نمتلكه في نسخة الويب.لمرَّة واحدة, يمكننا أن نرى "built in variables" أقلّلكن هناك بعض العناصر الجديدة التي أُضيفت إليها.و في "user defined variables" إذا ذهبت إلى "types".نرى أن هناك خيارات أقلّالأكثر مُلاحظة, هو أين "data layer variable"؟حسناً, هذا ربما أكبر فرق في "accelerated mobile page container of Google Tag Manager"."data layer" غير موجودة بالفعل.الطريقة الوحيدة لدفع "custom data" إلى"Google Tag Manager"ثم إلى "tags" تكون من خلال "AMP variables"الآن, كيف ندفعهم, هذا شيء يمكن أن نناقشه في فيديو آخر, لا يمكننا فعله الآنتأكَّد فقط أن "data layer" ليست الهيكل الأساسي ل"Google Tag Manager" في صفحات "AMP"و التي تعني أيضاً أن "triggers" تعتمد على أساسيات أخرى.و التي لم يتم ربطها في "data layer" لكن, في "URL" بدلاً من ذلك.إذاً, يوجد الكثير من التعقيدات عند نشر "tracking"في "accelerated mobile pager".لكن هذا ما قمنا بتغطيته في هذا الفيديو عن هذا العنوان.أريد أن أعطيك فقط عرض سريع عن دمج "Google Tag Manager"إذاً, أنت الآن تعلم, كيفيَّة تطبيق "Google Tag Manager" في "an accelerated mobile page".إذا كان لديك أي أسئلة, فمن فضلك اتركها في التعليقات بالأسفل.و إن لم تشترك بعد, ففكر في الاشتراك.نحن ننشر فيديو جديد يوم الأربعاء من كل أُسبوع.أنا اسمي جوليان, ألقاك في المرَّة القادمة.