38

أهمّ 10 مُتغيِّرات في "Google Tag Manager"

في هذا الفيديو, سوف تتعلَّم عن أهم 10 مُتغيرات "Variables" يجب عليك استخدامها في "Google Tag Manager"

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

مرحباً بمعجبي قناة " Measure", معكم جوليان, و قد جئت بفيديو آخر.

اليوم, أريد الحديث عن "Google Tag Manager variables"

المُتغيرات الآن تكون مثل المتخصصين في "Google Tag Manager"

دعنا نملأ "tax" و "trigger" و حتى مُتغيرات أخرى في هذا الحيز المتخصص من المعلومات.

يمكن حلهم أثناء تحميل الصفحة, و يمكنها الاحتفاظ بقيم مختلفة.

لا أودّ أن أتعمق حقاً في كيفية عمل المتغيرات,

لكن سأخبركم عن المتغيرات العشر الذين أُكثر استخدامهم في العادة في "Google tag manager deployments".

لذا بدون تأخير, لدينا الكثير للناقشه, لذا هيا لنبدأ.

المُتغير الأول لدينا هو: متغير "Data Layer"

اذا كان لديك "data layer" جيدة على صفحتك

ستكون قادراً على سحب البيانات المُخزنة في ال "Data layer"

و تقوم بنقلها إلى "data layer variables", هنا تماماً.

لتقوم بذا, ببساطة اذهب إلى "Google Tag Manager" و قم بإنشاء مُتغير جديد من نوع "data layer variable".

و ما تريد ادخاله: هو ببساطة المفتاح الذي تريد سحبه

لذا, في هذه الحالة, عندما ننظر إلى "data layer" نريد أن نعرف قيمة "visitor-logged-out"

سنحتاج لمعرفة "Key" و هو مكتوب هنا باللون الأسود: "the visitor type".

فقط أدخل هذا هنا في "data layer variable name" ثم ستتمكَّن من استخراجه من طبقة البيانات و تخزينه في مُتغير .

هنا خُدع ليست بالقليلة لمتغيرات طبقة البيانات "data layer variable" لكن لدينا فيديو منفصل عنها.

سأضع الرابط بالأسفل اذا أردت أن تفحصه.

المتغير التالي هو "Auto event tracking"

اذا كان لديك "auto event trigger" مُثبَّت, علي سبيل المثال اضغط على كلمة

ستريد على الأرجح أن تُمكن جميع متغيرات "auto event tracking variables".

ماذا يعني هذا؟

من الصور اضغط على تشغيل, ستذهب إلى قائمة المتغيرات.

و اضغط علي "configure" و من "Configure Built-in Variables" ستجد متغيرات "auto event" و التي يمكنك اختيارها.

اضغط عليهم فقط وسيكونوا متاحين لك في حسابك.

و يمكنك العودة وتجريب مشغل النقر "Click Trigger.

اذا تم تثبيته بالفعل, فاذهب إلى صفحتنا

أَعِد تحميل هذا, و اضغط علي زر "Add to cart" علي سبيل المثال.

و يجب أن تشاهد في في قائمة المتغيرات هذا ال"Auto event" هنا تماماً.

و ليس الكثير منهم يتم امتلائه.

ولكن إن تم ملأهم فلديهم بعض المعلومات التي ستمكننا من تمييز الضغط المختلف عن بعضه.

و نتأكد من أن الفلتر الموجود في "auto event trigger " قد امتلأ بطريقة صحيحة.

مثالا علي ذلك: تم نقل "classes" أو "Add to cart"

و هو نص الضغط للزر

و هذه معلومات حاسمة يمكن استخدامها باستخدام المُشغل

ويمكن استخدامها أيضا في علامتنا

لذا بالتأكيد يُمكِّن "Auto trigger event variables" اذا قمنا باستخدام "Auto event trigger" .

رقم 3: مُتغير "Google Analytic setting"

الآن, متى سيكون متغير "Google Analytic settings" مفيد حقاً؟ اذا كان لديك "Google Analytic" مُثبت في "Google Tag Manager" .

و لديك كثير من العلامات التي تُرسل البيانات ل "Google Analytics"

يمكنك معرفة نموذج الشعار الخاص ب"Google Analytics" حيث ستجد الكثير من الاعدادات التي ستختار منها, هنا تماماً.

مُتغير الإعدادات هو ببساطة مُتغير سيملأ كل هذه المجالات المختلفة بالاستناد إلى متغير واحد.

لذا, مثالاً على ذلك: نحن نملك مُتعقب الهَوية هنا, و هذا شيء سوف نحتاج أن نعيده مراراً في ال "event tag" علي سبيل المثال.

لذا من أجل التواصل يجب ببساطة أن ننشيء متغير جديد ل "Google Analytic".

سيقوم بملأ مجال مُتعقب الهوية مسبقاً

يمكننا أن نذهب و نُنشيء"Google Analytic settings thurible" جديد و تضعه في "tracking ID" و تحفظه.

و منذ الآن و صاعداً, ستجده هنا في "setting wearable"

انزل أسفل, و يمكنك أن تختار هذا, و ستتمكن من التخلص من "override settings" المتاحة في هذا الشعار.

لذا, جميع الإعدادات التي ستوضع تلقائياً في هذه الحقول هنا, قد تم التحكم بهم بمُتغير واحد رئيسي.

و هو مُتغيرنا "Google Analytics setting variable"

اذاً, هذا يجعل حياتنا أسهل لأننا نعلم ان مُتغير واحد يتحكم بهم جميعا و هو "Google Analytics setting variable"

هذا أيضاً يسهل علينا توسيع نطاق التعقب.

لأننا سنكون قادرين على الذهاب إلى "setting variable" نفسها

لِنَقُل أننا نريد أن نُرسل القياس المعتاد "Custom Dimension" مع جميع المشاهد و الأحداث

ببساطة سنحتاج للذهاب إلى اعدادات "arrabal" ثم اختار كتابة البُعد الصحيح هنا

سوف نُضيف "Custom Dimension", و يمكننا استخدام مُتغير آخر لنملأ هذا.

و نفس الشيء صحيح, إذا كان لديك إعدادات وتريد أن تطبقها على جميع الصفحات مثل: "illuminizer P"

لتصحيح أو لكي "cross domain tracking settings"

و هي مُعرفة في "Google Analytic setting arrabel"

و هذه ستنقل بسرعة إلى جميع العلامات أنك قمت بالفعل بالتثبيت .

اذاً فإن "Google Analytic" المسئول يكون أساسي للعمل مع "Google Analytics" و "tag manager"

التالي هو مُتغير "URL query"

و هذا المُتغيِّر مفيد جداً في التطبيق اذا كنت رأيت أي نوع من الاستعلامات في "URL" لديك

و توَد أن تحصل على هذه المعلومات.

و مثالاً على ذلك هنا , سيكون هناك كلمة بحث, والتي سنُدخلها في شريط البحث.

في نوع ما من العلامات أو نستخدمها في المُشغل

لذا باستخدام مُتغير URL يُمكنك بسهولة أن تُخرج هذا

فقط انطلق و قم بإنشاء مُتغير جديد من نوع "URL".

واختر من "Component type" كلمة "query type".

ثم ستحتاج فقط لمعرفة "query key"

و "query key" هو أيّ شيء أمام علامة يساوي للقيمة التي ترغب بها.

وفي حالتنا ستكون "S" ببساطة.

و إعطائها اسم كامل, و يجب الآن أن تكون متاحة لدينا كمُتغيِّر لنستخدمه في العلامات و تعقب الأثر.

التالي هو المُتغير المُشار إليه "Referrer variable"

الآن, هذا مُتغير قد تم انشاؤه و أُتيح افتراضياً.

يجب أن تكون قادراً على إيجاده هنا في قائمة المتغيرات بسهولة جداً.

و ماذا يُخبرنا هذا المُتغير في الواقع؟

إنها في الواقع ال"URL" التي جاء المُستخدم منها للتوّ قبل أن يدخل هذه الصفحة.

و من هنا فهي تشير إلى هذا الموقع.

يمكن أن يكون هذا مفيد إلى حدٍ ما اذا دخلت الصفحة.

لذا على سبيل المثال هنا , إذا ذهبت لنتائج بحث جوجل

و جئنا إلى الصفحة, سيكون لدي "Referrer" شيء مُتصِّل بجوجل.

هيا نذهب لننظر في "Referrer Variables".

و ها نحن ذا, لدينا هنا يُشير إلى "google.com"

و يمكننا استخدامه دائماً, لإطلاق إشارة عندما يستخدم شخص ما "google.com" على سبيل المثال.

أو يمكننا استخدام هذا في علاماتنا لإرسال البيانات إلى "Analytic tools".

ونجد أن أوَّل 6 متغيرا لدينا هم أوّلأ "Party Cookie Variable"

إن لم تذهب أبداً إلى "Google Tag Manager" في صفحتك,

اعرف أنَّ "Preview mode" يُحَمِّل من جديد في كُلِّ مرَّة تذهب إلى الصفحة.

هذا يعني أن الصفحة المُعَدَّة في النافذة المُحمَّلة تظهر لك في "Preview mode"

و ستمتليء "Data Layer" بملفات جديدة.

ولسوء الحظ فإن "Google Tag Manager" لا يتذكر أيّ شيء حدث قبل ذلك

كُلّ صفحة مُحمَّلة تعني تحميل جديد ل"Google Tag Manager"

في تطوير الويب, يمكنك التمسُّك بالبيانات.

و بشكل عام فهناك "كوكيز" للقيام بهذا.

يُمكن أن تنشيء "cookies" و تُرفقها في "Google Tag Manager" و لكن هذا عنوان فيديو آخر.

الآن نريد فقط أن نعرض "cookies" المحددة في متصفحنا.

سنفتح قائمة "كروم " هنا.

للذهاب إللى أدوات التطوير.

و ها نحن نحصُل على بعض المعلومات المفيدة في تطبيقات الحساب.

و "cookies" هنا تماماً, يمكننا أن نري أيّ البيانات المُرفقة قد تمَّ إنشائها بشفرة مختلفة في موقِعنا.

الآن, في بعض الحالات لدينا معلومات أكثر نفعاً, و في حالات أُخرى فهي بلا فائدة.

لأنها لا تعرف حقاً ماذا تعني بالضبط.

لكن كمل قُلت يمكنك أيضاً في الواقع أن تنشيء "cookies" الخاصة بك.

على سبيل المثال, هذه "cookie" هنا أنَّ هذا المُستخدم هو مُشترك جديد.

تمَّ عملها ربما للتأكد ما إن جاء المستخدم من مصدر استخدام البيانات.

و لهذا عَرَّفنا هذا المُستخدم, و لقد قمنا بكتابة هذه المعلومات إلى "cookie".

كيف يمكننا جعل هذا مفيداً الآن في "Google Tag Manager"؟

يُمكننا أن نسحب هذه القيمة من "cookie" بإنشاء " first party cookie variable".

كُل ما عليك فعله هو الذهاب إلى "Google Tag Manager"

و تحت عُنصر "user defined variables" نختار "first party cookie variable" كَ "النَّوع".

و سنحتاج لامتلاك "the neede name" في حالة أنَّ اسم ال"cookie" هو "newsletter subscriber"

إعطاء هذا كله اسم, و يجب أن يتمّ سحب القيمة الحقيقية خارج ال"cookie".

و ها هي, ها نحن ذا.

لذا ربما تنظر إلى "cookies" و المعلومات المفيدة التي يجب سحبها خارجاً باستخدام "first party cookie variable".

المُتغير التالي هو "Dom element" .

الآن, ما الذي يشير إليه "Dom"؟ إنه يشير إلى: نموذج عرض مستند.

هذه كيفية وضع علامة على موقعنا.

و يمكننا ببساطة أن نقوم ب"right click" على العنصر في الموقع, و الضغط على العنصر الذي يتم فحصه في متصفِّح "Chrome".

و التي سوف تفتح لوح العناصر هنا.

و تُعطينا مثال بصري على نموذج موضوع الوثيقة.

و باستخدام "Dom element variable" ستكون قادراً على سحب أيّ نوع يُهمك من "node".

و سنحصل على إما على "خاصيَّة" أو النص الذي يوجد بين هذين العنصرين.

لذا علي سبيل المثال هنا, إذا أردنا سحبها خارج قائمة "card"

و خارج قائمة "scout"

سأحتاج إما معرفة الهَويَّة "ID", و هذه العناصر لا تحتوي على "ID".

أو إلى "CSS selector".

لحُسن الحظ, هناك كَميَّة من الأصناف التي يمكننا استخدامها في مُتغيرنا بسهولة جداً.

لذا, هيا لنتجه إلى "Google Tag Manager".

و هنا, تحت "Variables" سنذهب إلى جديد "New"

مستخدم يُعرِّف المُتغيرات, و يضغط على عنصر لمُتغير "Dom".

سنختار من اختيار طريقة "selector method" هذه المرَّة "CSS selector"

لأننا لا نملك "ID".

و لدينا "class" لذا سنكتب "نقطة" هنا و كَميَّة ".amount".

نحتاج أن نعرف المزيد عن "CSS selector" لنقوم بعمل هذا بكفاءة.

بعد ذلك, يمككننا اختيار الخصائص "attribute" التي نريد سحبها.

بما أننا سحبنا النصّ, يمكننا تركه فارغا الآن.

و سنكتب الاسم بالكامل, ثم نحفظ هذا.

و, هيا نُجرِّب هذا كُلَّه.

و ها نحن ذا, نجد أن قيمة "dumb card" هي 48$

و تم سحبها خارج الصفحة مباشرةً.

سنتقَدَّم أكثر, سنقوم بإلقاء نظرة على "look up table variable".

الآن, "lookup table variables" لديها استخدامات عديدة.

لكن, أسهل طريقة ستكون ببساطة إعادة كتابة "المُتغيِّرات" الموجودة بالفعل.

لذا, علي سبيل المثال لدينا مُتغير تمَّ إنشاؤه مُسبقاً.

هذا سيسحب القيمة من "cookie newsletter subscriber" و ستكون "true".

الآن, إذا استخدمت هذا في "event tag" على سبيل المثال,

فببساطة سترى كلمة "true" علي الحَدث.

و لن تُدرك تماماً ماذا يعني هذا.

لذا, ستوَّد أن تكتب هذا ثانيةً في هذا المُتغيِّر و تُحوله إلى شيء يمكن التعرُّف عليه أكثر مثل "subscriber".

يُمكن هذا بسهولة باستخدام "lookup table variable".

هيا نتجِّه إلى "Google Tag Manager" و نقوم بإنشاء مُتغيِّر "user-defined".

و هذه المَرَّة, سنستخدم "lookup table".

الآن, "lookup table" ستعمل مثل هذا إذا كان هذا هو ذلك البيان.

إذا أي مُتغير في هذه الحالة سيبدو مثل "cookie variable"

ثم يُمكننا إضافة قواعد رئيسيَّة, اذا كان في المُدخل "input" قيمة صحيحة"true" فإنَّنا سنكتب في المُخرج "output" كلمة "subscriber".

و إذا كانت قيمة ال"input" غير صحيح"false" فإنَّنا سنكتب في المُخرج "output" كلمة "non-subscriber".

و ستكون"default value" إذا حدث أيّ شيء آخر هي "unidentified".

حسناً, لنجرِّب هذا, و نعطيه اسم أول و نرى ماذا سيحدث.

سنعود إلى الصفحة, و نقوم بإعادة تحميل هذا.

و المُتغيِّر الذي لدينا مُسبقاً لا يجب أن يتغيَّر, فلا يزال لدينا قيمة "cookie newsletter subscriber" صحيحة"true".

لكن في إعادة الكتابة يجب أن نجدها في "lookup table variable"

ها نحن ذا, كَ"subscriber" و الآن ماذا سيحدث إذا كانت خاطئة في الواقع؟

هيا لنُغيِّر في ال "cookie" فقط للمحاكاة, سنقوم بإعادة تحميل هذه الصفحة هنا.

و سنرى أن"lookup table subscriber" هي الآن "non-subscriber".

و ال"cookie" ستكون "false".

الآن, "lookup tables" ستكون مفيدة في حالات عديدة أخرى.

و لدينا بعض الفيديوهات مُرفقة بالرابط أسفل, إذا أردت أن تعرف المزيد عن هذا.

التالي هو "the Reg X lookup tables".

ما الذي من الممكن أن تكون لاحظته عندما تنشيء "lookup table subscriber variable" هنا؟

يجب أن نكون أكثر دِقَّة مع الأسماء.

إذا كتبت في أيّ شيء آخر أو وضعت مسافة أُخرى هنا فلن تتطابق مرَّة أُخرى و سنحصل على "undefined" في قيمة المجال.

لذا, الخيار المُطابق الذي لدينا في قائمة "input"

يكون مُشابه ليُساوي"equals"

"the cookie new set of subscriber" تحتاج أن تكون صحيحة لكي تذهب إلى "output subscriber".

لكن لدينا متاح هنا أيضاً: مُتغير من نوع"reg X lookup table".

و الآن ما هو "reg X" انها اختصار ل "regular expression".

اذا كنت تعرف "reg X" ستعلم أنك يُمكنك أخذ تفاصيل من بحث التساؤلات"search query".

و التي ستكون مؤثرة للغاية.

لذا, علي سبيل المثال, هيا لنذهب إلى مرحلة مُتقدِّمة.

لنقل أننا نوَّد تصنيف جميع المُنتجات على الصفحة.

مثل هذه إلى فئة المنتجات "product category".

لذا سنريد أن نضع مُخرج "output" لمُنتتج لنُصنف ببساطة جميع منتجات الصفحات.

و يمكننا امتلاك واحدة لصفحات "category" كذلك,

يمكننا عمل هذا بسهولة باستخدام "red x table".

لذا, يمكنك أن تأتي هنا و تختار من المُدخلات "page path".

و يمكننا إضافة هنا إذا كان "page path" يحتوي علي أيّ شيء مثل "slash product"

و سأحتاج أن أقوم بإلغائهم, لذا سيكون المُخرج عندي كلمة "product".

و إذا كان لدينا "slash category" فيجب أن يكون ال"output" كلمة "category".

ربما سنحتاج أن نُطابق أيضاً المسافات بعد الكلمات هنا تماماً و قبل ذلك.

لذا ما سأقوم بعمله هو إحاطة هذا بنَجمة "*" و التي تعني أن كل شيء سيكون كثير.

لذا لنضع هذا في الأمام و في الخلف, و نرى إذا كانت تعمل.

و لنحفظ هذا ونقوم بعمل "refresh" لهذه الصفهة.

و في مُتغيرنا الجديد سنرى "regex table" لديها اسم "category" في صفحة "category".

نحن نرى "URL" هنا تماماً أو "URL path" و هذا مُطابق.

و إذا ذهبنا إلى صفحة المُنتَج سنرى نفس نتيجة المنتَج الآن.

لأننا ننظر إلى "URL" ثانيةً و نُطابق هذا الجزء الموجود بداخل "URL".

أتمني أن تفهم أنه يُمكن أن تكون مُتمرِّس أكثر مع "reg X" في "reg X table"

ستكون في "normal lookup table"

هذا ممكن أن يكون قيِّم جداً على سبيل المثال لتجميع المحتوى في "Google Analytics" أو للنظر في "Referrer"

يُمكنك عمل "Channel grouping" فعَّال جداً, و إرساله من و إلى "Google Analytics" بسهولة.

لذا فإنَّ "record table" هي في الحقيقة خاصَّة مُتطورة و يمكن أن تكون مؤثرة جداً في "Google Tag Manager".

و لقد وصلنا إلى الأخير, و هو المؤيد لجميع المُتغيرات و يديرهم جميعاً و هو "Custom JavaScript variable".

الآن, "Custom JavaScript" الذي سأعرضه سيكون الأصعب عندما تكتب نفسك"yourself" أو الأسهل لنسخ الكود فقط.

لكي أكون صريحاً, "Custom JavaScript variable" من المحتمل أن تُستخدم لاستبدال كل المُتغيرات التي رأيناها في هذا الفيديو.

لأن "JavaScript" هو التكنلوجيا التي تمُدّ "Google Tag Manager" بالطاقة.

و لهذا ستكون قادرة على فعل كل شيء يقوم به "Google Tag Manager".

عندما نراها باستخدام "JavaScript" في هذا ال"JavaScript variable".

لذا, هيا نرى مثال صغير هنا.

في "Google Tag Manager" سأتمكن ببساطة من الذهاب إلى "user defined variable".

ثم إنشاء "custom JavaScript variable" جديد.

و هنا يجب تنفيذ بعض الاتفاقيات.

1: سنكتب وظيفة مجهولة و التي سيكون لها قيمة.

لذا لنضع هذا في البداية تماماً.

و في المنتصف يمكنك أن تلغي أيّ نوع من "JavaScript code".

لذا بوضوح ستحتاج أن نعرف قليلاً عن "JavaScript" و نُعيد القيمة.

سنأخذ مثالاً فقط, هيا لنذهب إلى الوقت الحالي.

و الذي سنحصل عليه عندما نكتب "new date".

و نكتب "return this time", نعطيها الاسم بالكامل, ثم نحفظ هذا.

نقوم بعمل "Refresh", "Refresh" للصفحة و نري في المُتغيرات ما الذي خرج.

نري هنا, هذا يعطينا مُتغير ل"type date" مع الوقت الحالي و التاريخ.

و هذا يجب أن يتغير ديناميكياً, نراه هنا في المستوى الثاني.

بعض منهم يتغيروا حسب وقت تحميل ال"event".

و أيضاً, بالقليل من "JavaScript" و القليل من المزيد من الأكواد يمكن أن يجعل هذا مفيداً إلى حدٍ ما.

على سبيل المثال, إرسالها إلى "custom dimension" في "Google Analytics" لنعرف الوقت بالتحديد في "timestamp".

متي وصلت "hit" بالضبط إلى "Google Analytics", أو لحسب الوقت الذي قضاه المُستخدم في موقعك.

لكن ليس لديَّ الوقت لأشرح لك كيف سيعمل هذا.

أتمنى فقط أن تفهم احتمالات "custom JavaScript Variable"

لحُسن الحظ, لدينا الكثير من الفيديوهات عن "custom JavaScript variable" مع حالات استخدامها في هذه القناة, سأترك الرابط بالأسفل.

حسنا, الآن أنت تعرف المُتغيرات العشرة التي أستخدمها في "Google Tag manager"

يوجد أكثر من هذا , و يوجد استخدامات عديدة أيضاً لهذا المُتغير بشكل خاص.

سأترك الأمر لك لتعطيني ملاحظاتك في التعليقات بالأسفل.

أوَدّ أن أعرف أخباركم كالعادة, و إذا لم تقم بعد, ففكر بالمُشاركة من هنا تماماً

لأننا نقوم بعمل فيديوهات جديدة مثل هذا تماماً كل اسبوع.

الآن, أنا اسمي جوليان, ألقاك في المرَّة القادِمة