11

5 نصائح "GTM" مُتقدِّمة (الجزء الأوَّل)

إذاً, أنت ترى نفسك كمُطبٌِّق "Google Tag Manager" مُتطوِّر.

إذا هنا 5 نصائح و التي من المحتمل أنك لم تسمع عنها بعد لتجعل عملك أسهل في"Google Tag Manager".

هذا و أكثر, تابعني.

موسيقى مُبهجة

أهلاً, و مرحباً بكم في فيديو جديد من قناة "Measure School".

لتعليمكم طريقة التسويق التي تعتمد على البيانات.

أنا اسمي جوليان, و في هذه القناة نقوم بعرض التسويق التقني و دروس توجيهية و فيديوهات للخُدع و النصائح مثل هذا تماما"

لذا إن لم تشترك بَعد, ففكر في الاشتراك.

اليوم سأعطيك 5 نصائح متطوِّرة ل"Google Tag Manager" و التي ستجعل عملك أسهل في "the Tool"

أنا أعمل في "The Tool" لأكثر من 5 سنوات الآن.

و قمت بمئات من التطبيقات, و هناك دائما شيء يُمكنك تطويره في مهارات التطبيق.

"Google Tag Manager" هو فَن! التطبيق "implementing tracking codes" على موقعك

أراهُ كَفَنّ, و هناك طرق عديدة للقيام بالأشياء.

و هناك نصائح و خُدع مختلفة للقيام بهذا العمل بشكل أسرع و أكثر كفاءة.

و اليوم سأقدم لكم نصائحي الخمسة الذين أستخدمهم عادةً.

حسناً, لنبدأ بالنصيحة الأولى.

افحص البيانات الداخليَّة ل"Google Tag Manager".

إذاً, ربما تعرف "data layer" إذا كنت متطور إلى حدٍ ما.

و يمكنك دفع البيانات إلى طبقة البيانات "data layer".

"data layer" التي تراها هنا هي مختلفة في الواقع عن البيانات الموجودة في"JavaScript console".

لذا, إذا ذهبت إلى "JavaScript console" فيمكنك بوضوح الكتابة في"data layer".

ستحصل على تقرير لكل البيانات المختلفة هنا.

و نحن نراها في "data layer" هنا أيضا".

لكنها ليست في الواقع مجموعة بالمعنى التقليدي.

لأنها تم ملؤها بوظيفة"function" بالأسفل هنا و هي "push method".

و ماذا يفعل هذا في الواقع؟ إنه ينقل جميع المعلومات التي تراها في هذا الموضوع

إلى نموذج البيانات الأولي في "Google Tag Manager"

كيف يمكننا الاستفادة من هذا؟ إذا لاحظت قواعد النحو فيمكنك فحص هذا في الواقع.

و ستأتي كالتالي, يمكنك فقط أن تكتبه في جوجل و في "score tag manager"

مثل هذا, الأقواس المربَّعة التي تُدخلها في"GTM container ID"

و في حالتنا هذه سيكون هذا الموجود هنا.

لنرى إن أمكننا نسخ هذا هنا.

و بعد ذلك, لديك مداخل لوسائل مختلفة ل"data model" في "Google Tag Manager"

ما يُهمنا حقاً هو "data layer"

دعنا نكتب "data layer." هنا

ثم سيكون لدينا وسائل مختلفة, يُمكننا إنشاء "data layer values" لمفاتيح أساسيَّة.

يمكننا الحصول على تاريخ أساسي في "data layer"

من النموذج الأولي ل"Google Tag Manager"

و يمكننا إعادة تشغيل البيانات هناك

الآن, النصيحة التي سأسديها إليك هي أن تحصل علي "data layer key"

كل ما عليك فعله هو استخدام "get method" في شريط

هذا سيُمثِّل أي شيء تريد استرجاعه من "data layer"

و يُمكنك في الواقع استخدام بناء الجملة الصحيح و الذي نستخدمه أيضاً في قائمة المُتغيِّرات هنا.

إذا كنت ستقوم بإنشاء"data layer variable".

يُمكننا على سبيل المثال الوصول إلى "ecommerce .detail.products".

ثم أول منتج و الذي سيكون "0.the name"

ثم سيُعطيَنا "the extra data layer key", هنا تماماً.

هذه طريقة رائعة لتجربة "data layer keys" مُسبقاً.

و أيضاً, يُمكننا نسخ هذا فقط و نقله إلى "data layer name" هنا.

احفظ هذا, و الآن فقد تم حفظها في "data layer"

هناك ميزة أخرى لهذه الطريقة

لأنك إذا أدرت استخدام اسم هذا المُنتَج داخل "html tag"

يمكنك إدخالها باستخدام قوسيْن منحنييْن

و إيجاد "data layer variable" و استخدامها في عملية تهيئتها.

لكن أحياناً لا تريد حقاً.. أو أنَّك تجد إنشاء "data layer variable" مُرهق جداً لكل مفتاح واحد تراه في "data layer".

و أيضاً, يُمكننا أن تستخدم الطريقة عينها التي جرَّبناها بالفعل في "JavaScript console".

لاستخدامها في حالة "html tag".

مرَّة أخرى, استبعد"JavaScript", و ضَعه في مُتغيِّر اسمه "test".

هذا مُتغيِّر شامل, لا ينبغي عليك استخدامه الحياة الحقيقية.

و لا استخدامه في "tag deployment" لأنَّ له آثار جانبيَّة.

لا تُغلقه بعد ذلك, نحن فقط نقوم به لأجل لتقديم بُرهان الآن.

لنضغط على "refresh", و نقوم بعمل "refresh" للصفحة.

و يجب أن نرى اسمنا قد طُبع في "console" هنا تماماً.

هذه فقط نصيحة سريعة عن كيفيَّة تفقُّد نموذج بيانات الإنترنت ل "Google Tag Manager".

و سحب بعض المعلومات من "data layer" الداخليَّة أو العرض.

حسناً, سننتقل إلى الخُطوة التالية, و هي في الواقع: تجربة "Matches CSS Selector" مُسبقاً.

ربما تكون مدركاً الآن أنَّ خيار استخدام "matches CSS selector" مُتاح في قوائم التصفية "filter menus" للمُشغَّل"trigger".

إذاً, فأنت لديك خيار فعَّل جداً و هو: "matches CSS selector".

لدينا فيديو آخر يشرح هذا الموضوع بالكامل.

إنه فقط مُرهق للغاية عندما تكتشف أنَّك تمتلك على سبيل المثال

نقطة لقائمة "menu point", و تريد تتبُّع جميع "menu points" هنا.

لفحص هذا, و ربما اكتشاف ما هو سلف هذا, و كيف يمكنني إنشاء "CSS selector" الخاص بي؟

ليتطابق ربما مع العناصر التي أُقارنها به.

الآن, و بوضوح يُمكنك استخدام "JavaScript console" و كتابة شيء مثل ".document.queryselector"

و هذا أيضاً وسيلة تخمين حقاً, لأنك ستحتاج لتشغيل هذا على عنصر مُعيَّن.

و هذا سيكون العنصر الذي يظهر في "GTM element pane".

لذا إذا ضغطت هنا فسأرى "linkclick trigger" تم تثبيته بالفعل و لديَّ مُتغيرات "variables".

و أرى هنا في "click elements" أنه لديَّ "object".

تحتاج لامتلاك "html object" لتتمكن من استخدام "the matches CSS selector".

الآن, أجل, نرى هنا أنَّ هذا "URL", لكنَّها ستكون "html element" حقاً.

و عندها فقط يُمكننا تشغيل "the matches CSS selector option".

إذا كنتم مدركين لهذا جميعاً, يمكنكم البدء في لعبة لتجريب إنشاء "CSS selector" هنا.

جرِّب هذا بالذهاب إلى "elements pane" و تجربة "CSS selector"

توصيل كل هذا ب"tag", المرور ذهاباً و إياباً بوَضع "Refresh and Preview"

لاكتشاف إذا تم إطلاق العلامة"tag" بطريقة صحيحة أم لا.

إذاً, ما هي أفضل وسيلة؟

حسناً, بالنظر إلى آخر نصيحة, ففي الواقع يمكننا استخدام التمثيل الداخلي ل"data layer".

إذا نظرنا إلى وضع "preview and debug" هنا, فسنرى "data layer", و نريد أن نُلقي نظرة في "GTM element".

و هو الممثل لعنصر النَقر "click element" هنا تماماً.

لنتمكَّن من الوصول إلى ذلك عبر "JavaScript console".

سنفتح "JavaScript console" هنا.

و سنعود إلى آخر واحدة في هذه المَرَّة, نحن نريد الحصول على "gtm.element".

و ها نحن ذا, لدينا العنصر الصحيح متاح هنا.

بالمناسبة, إذا أردت أردت النظر في التقرير في "element pane"

يمكنك النقر و الكشف عن "element pane" و رؤية "CSS selector" هنا.

و نصيحة أخرى, إذا قمت بالنقر على مفتاح "escape", هذا سيفتح لك في الواقع "JavaScript console" أسفل "element pane".

لذا يمكنك رؤيتهم هما الاثنين في الوقت نفسه.

هدفنا الآن هو إطلاق هذا دائماً عندما ينقر شخص ما على واحدة من "menu points".

إذاً, لدينا هنا "the if class primary navigation", و نريد تجريب قاعدة "CSS selector rule".

كيف يمكننا القيام بهذا؟ حسناً, يمكننا استخدام هذا العنصر, هنا تماماً, لننقر على زر فوق"up".

ثم نضع نقطة "." ثم نضعها في الوسيلة التي يستخدمها "Google Tag Manager" في الواقع.

لاختيار "matches CSS selector option", و هو أيضاً "the matches option".

إذاً, إذا كانت لديك هذه الوسيلة متاحة,

يمكنك الآن تجربة ما إذا كان "CSS selector" سيعمل في "trigger scenario".

إذاً, في حالتنا, أول شيء سنضع رابط

إذاً, سنضع "a", و هي صحيحة.

هذا إيجابي ل"matches CSS selector", و هذا و بوضوح واسع جداً.

و الآن, لنقل أننا نريد أخذ السليل "descendant" للتصفُّح الأولي "primary navigation".

حسناً, سأضغط "enter" و سأرى خطأ "false".

لأنَّ هذا ليس "CSS selector" صالح

أول شيء سأحتاج لكتابة نقطة "." هنا في المُقدِّمة.

و هي الآن صحيحة, لكن إذا أردت الحصول على السلالة المباشرة, فأنا أستطيع إدخال علامة أصغر أيضاً.

إنها خاطئة لأنها ليست سلالة مباشرة "direct descendant", إنها في الحقيقة واحدة من عناصر "UL" و ما إلى ذلك.

إذاً, هيا لنَعُد, و نتخلَّص من هذا.

ربما نُضيف مُحدِّد آخر للتأكيد.

لنقل أننا نريد امتلاك "menu item" هنا.

إذاً لنكتب هنا ".menu-item", و هذا يتوافق معه جيداً.

الآن, أفضل شيء هنا أننا يُمكننا تجربة هذا.

و مرَّة أخري, سأضغط على مفتاح الأوامر, و هذا سوف يذهب إلى "data layer".

و في هذه المرَّة, سأضغط على السهم لأعلى ,و هنا "JavaScript console" ثانيةً.

هذا سيحصل على العرض الحقيقي داخل "Google Tag Manager".

و نجرِّب اختيار "matches" هنا.

سنحصل أيضاً على صحيح"true", هيا نُجرِّب شيء سلبي.

حسناً, سأنقر على كلمة "hello", و سأستخدم نفس القاعدة.

أنا أنقر فقط على زر "أعلى" هنا, و لقد حصلت علي خطأ.

إذاً, سأكون واثقاً للغاية الآن, أنَّ اختيار "matches CSS selector" يعمل حقاً.

إذاً, يمكنني نسخ هذا.

سأعود إلى حساب "Google Tag Manager" و أُدخل هذا ك"CSS selector option".

إذاً, ستكون هذه فقط الروابط في القائمة.

يجب أن نوصلها ب"test tag", لايوجد شيء هناك.

لكنها تساعدنا لتحقيق قاعدتنا, لنقم بعمل "Refresh" للصفحة.

بالإضافة إلى كل هذه الألواح "panes".

سأقوم بالنقر على واحدة من هذه الأزرار, إنها لم تنطلق.

لماذا حدث ذلك, هيا نذهب لنختبر "tag", و نضغط أسفل.

كان هناك مُتغيِّر خاطيء, بئساً.

حسناً, هيا لنعد ل"trigger menu".

يجب أن تكون "click element" في الواقع, صحيح؟

إذاً, لنحفظ هذا, و نضغط على "refresh", ثم "refresh" مرَّة أخرى.

و في هذه المرَّة, سنرى إنطلاق "test tag" في رابط النقر"link clicks" في قائمة العناصر"menu items".

إنها حقاً طريقة رائعة لاستخدام وحدة البيانات الداخليَّة مع "JavaScript console"

لاختبار "matches CSS selector option"

قبل أن تُدخلها حقاً في الأداة "tool".

شاهد النصيحة التالية هنا.