25

تغيير الروابط من خلال Google Tag Manager (الجزء 1)

ولهذا السبب قمتُ بتقسيمهم

وفي أول فيديو، سنتحدث عن كيف يمكنك القيام بذلك من خلال JavaScript

سأريكم في هذا الفيديو كيف يمكنك تغيير الروابط

هذه هي التقنية الأساسية التي ستسنخدم في جميع مقاطع الفيديو التالية

بمساعدة JavaScript و Google Tag Manager

لذا، تابعونا في الفيديو الثاني

وقد يكون هذا مفيدًا حقًا بشكل خاص

حيث سأقدم بعض حالات الاستخدام

إذا كنتَ تريد نقل معلومات على عنوان URL

حيث يمكنك استخدام خاصية استبدال رابط أو خاصية إرفاق رابط في المقاطع المقبلة

إلى موقع آخر من خلال الرابط

ونعمل هنا بشكل خاص مع الروابط التابعة لشركة أمازون

كل هذا وأكثر قادم بعد هذا مباشرة

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

أهلًا ومرحبًا بكم في فيديو آخر من MeasureSchool.com

والآن لدينا الكثير لنقوم بغطيته، فلنبدأ.

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

مرحبًا بكم في متجرنا التجريبي

اسمي جوليان

في هذه الصفحة، لدينا روابط معينة نريد تغييرها لأغراض التتبع

وإذا كنتَ جديدًا على القناة،

والآن، ستتكون هذه الروابط من خلال Product Link

فنحن نقدم مقاطع فيديو عن التسويق، والاستعراضات التقنية، والبرامج التعليمية، والنصائح، والحيل

حيث تأخدك إلى موقع Amazon

إذا كنت لا تريد أن تفوت شيء، فانقر فوق زر الاشتراك

ولدينا ثلاثة روابط من هذه نريد تغييرهم جميعًا

وأيضًا رمز الجرس لتفعيل الاشعارات

وقبل أن ننفذ أي نوع من التتبع في Google Tag Manager

حتى لا تفوت مقاطع الفيديو الجديدة

علينا تجريب JavaScript الخاص بنا أولًا

ونريد الآن أن نتحدث عن كيف يمكنك تغيير واستبدال وإرفاق شيء

حتى نعلم أنها تعمل بشكل صحيح

في رابط من خلال JavaScript

الآن، كيف يمكنك تغيير رابطًا بمساعدة JavaScript؟

وثم من خلال Google Tag Manager

لنجرب ذلك أولًا في أدوات المطورين الخاصة بنا

متى يكون هذا مفيدًا؟

يمكنك الإنتقال داخل متصفح كروم إلى عناصر ومن ثم إلى أدوات المطور الخاصة بك

إذا أردتَ إرفاق شيئًا ما بسلسلة لم يكن موجودًا في الرابط الأصلي

وسيؤدي ذلك عادة إلى فتح جزء "العناصر"

يمكنك فعل ذلك من خلال Google Tag Manager

الذي سيعرض لك ترميز HTML الخاصة بصفحتك

وهي مفيدة خاصة إذا أردت نقل معلومات خارج موقع الويب الخاص بك

والآن، نحن مهتمون بفعل ذلك من خلال Product Link

إلى أداة تتبع إلى جهة ثالثة

ويمكننا استخدام هذه الأداة هنا للتمرير والنقر

فمثلًا، برنامج لشركة تابعة

وسنرها كيف يتم تمييزها في لغة HTML الخاص بنا

ويمكنك إرفاق كود الشركة التابعة بعنوان ال URL

هذا رابط HTML قياسي جدًا وهو "AHREF"

ويمكنك أيضًا محاولة استبدال شيء ما في عنوان ال URL

ووصف "AHREF"

وكل شيء من الناحية الرقمية بعد ذلك يتم فعله من خلال Google Tag manager

ولدينا عنوان ال URL الذي سيتم توجيه المستخدم إليه

ويمكن أن يكون هذا مفيدًا جدًا

والآن، نريد اختيار كل هذه العناصر التي تحتوي على Amazon

وسأريك بعض الحالات في هذه المقاطع

كيف سنفعل ذلك؟

ولقد أخذ هذا الدرس التعليمي وقتًا أكثر مما توقعته

حسنًا، هناك أمر بارع في JavaScript يسمى Document.queryselectorALL

ولهذا السبب قمتُ بتقسيمهم

وبعد ذلك، بين قوسين تضع في علامات تنصيص CSS Selector الخاص بك

وفي أول فيديو، سنتحدث عن كيف يمكنك القيام بذلك من خلال JavaScript

لذا، إذا كنتَ تريد الحصول على كافة عناصر Div على الصفحة

هذه هي التقنية الأساسية التي ستسنخدم في جميع مقاطع الفيديو التالية

فما عليك سوى إدخال Div والحصول على كافة العناصر في الصفحة نفسها

لذا، تابعونا في الفيديو الثاني

والشيء الرائع هو أنك إذا فتحت هذه من هذا المثلث الصغير هنا

حيث سأقدم بعض حالات الاستخدام

فيمكننا تمرير ورؤية مكان عناصر Div هنا

حيث يمكنك استخدام خاصية استبدال رابط أو خاصية إرفاق رابط في المقاطع المقبلة

وإذا كنتَ ستجرب هذا للروابط

ونعمل هنا بشكل خاص مع الروابط التابعة لشركة أمازون

ما عليك سوى الضغط على السهم لأعلى للحصول على الأمر الأخير

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

ويمكننا تغيير ال (’Div ’) إلى (’a’)

والآن لدينا الكثير لنقوم بغطيته، فلنبدأ.

وسنرى الآن أنه تم إدراج كافة الروابط في الصفحة رقم 77

مرحبًا بكم في متجرنا التجريبي

في هذه الصفحة، لدينا روابط معينة نريد تغييرها لأغراض التتبع

وإذا مررنا فوقهم فسنرى هنا "a# logo'

والآن، ستتكون هذه الروابط من خلال Product Link

ولا بد من أنه هنا

حيث تأخدك إلى موقع Amazon

ومن اواضح أن هذا ليس الرابط الذي نهتم بتغييره

ولدينا ثلاثة روابط من هذه نريد تغييرهم جميعًا

نحن نريد الوصول إلى الرابط الموجود فعليًا في صفحة هذا المنتج

وقبل أن ننفذ أي نوع من التتبع في Google Tag Manager

لذا، سنقوم بتحديد CSS Selector الخاص بنا

علينا تجريب JavaScript الخاص بنا أولًا

دعونا نضغط على السهم لأعلى مرة أخرى

حتى نعلم أنها تعمل بشكل صحيح

وفي هذه المرة، نريد فقط الحصول على الروابط التي تشتمل على

الآن، كيف يمكنك تغيير رابطًا بمساعدة JavaScript؟

عنوان ال URL الخاص بنا داخل وصف "AHREF"

لنجرب ذلك أولًا في أدوات المطورين الخاصة بنا

كيف يمكننا فعل ذلك؟

يمكنك الإنتقال داخل متصفح كروم إلى المزد من الأدوات ومن ثم إلى أدوات المطور الخاصة بك

حسنًا، هناك تعديل يمكننا تنفيذه والذي سيكون بين قوسين مربعين

وسيؤدي ذلك عادة إلى فتح جزء "العناصر"

ومن ثم الصفات التي نهتم بها

الذي سيعرض لك ترميز HTML الخاصة بصفحتك

وبالنسبة لنا، سيكون ’=a[href’

والآن، نحن مهتمون بفعل ذلك من خلال Product Link

ومن ثم في علامتي اقتباس سندخل كيفية ملء ahref

ويمكننا استخدام هذه الأداة هنا للتمرير والنقر

وفي حالتنا، سأهتم بعنوان ال URL الموجود بالأعلى هنا

وسنرها كيف يتم تمييزها في لغة HTML الخاص بنا

ثم ندخل هذا ونضغط إدخال

هذا رابط HTML قياسي جدًا وهو "AHREF"

وسنحصل على عنصر واحد الآن وهو رابط المنتج الخاص بنا

ووصف "AHREF"

الآن، من الواضح أننا متهمون بروابط Amazon الأخرى في هذه الصفحة

ولدينا عنوان ال URL الذي سيتم توجيه المستخدم إليه

إذن، يمكننا كذلك التعديل ليشمل الروابط التي تشتمل على Amazon في عنوان ال URL

والآن، نريد اختيار كل هذه العناصر التي تحتوي على Amazon

مثل ما يحتوي على خيار

كيف سنفعل ذلك؟

والمعدل لهذه هو العلامة النجمية أمام علامة التساوي

حسنًا، هناك أمر بارع في JavaScript يسمى Document.queryselectorALL

ومن ثم يجب عليك إدخال ال contains الخاص بك مكانها

وبعد ذلك، بين قوسين تضع في علامات تنصيص CSS Selector الخاص بك

في حالتنا، وسيكون ببساطة Amazon

لذا، إذا كنتَ تريد الحصول على كافة عناصر Div على الصفحة

ولدينا كافة الروابط الثلاثة التي تحتوي على Amazon في عنوان ال URL المحدد

فما عليك سوى إدخال Div والحصول على كافة العناصر في الصفحة نفسها

والآن فصاعدًا، يمكننا استخدام هذا الرابط

والشيء الرائع هو أنك إذا فتحت هذه من هذا المثلث الصغير هنا

ولكن لننتقل مرة أخرى إلى محدد الاستعلام الأول هنا

فيمكننا تمرير ورؤية مكان عناصر Div هنا

حتى نتمكن فقط من رؤية كيف يمكننا تغيير رابط واحد أولًا قبل تغيير

وإذا كنتَ ستجرب هذا للروابط

كافة الروابط الأخرى

ما عليك سوى الضغط على السهم لأعلى للحصول على الأمر الأخير

لذلك عدنا إلى الرابط الخاص بنا

ويمكننا تغيير ال (’Div ’) إلى (’a’)

وهذا الرابط بالضبط هو ما نريد تغييره

وسنرى الآن أنه تم إدراج كافة الروابط في الصفحة رقم 77

والآن، تغيير الروابط يتضمن الحصول على الوصف الفعلي ل ahref

لتغيير عنوان ال URL هذا

وإذا مررنا فوقهم فسنرى هنا "a# logo'

كيف يمكننا اختيار الوصف من خلال JavaScript؟

ولا بد من أنه هنا

فلنعد إلى هنا

ومن الواضح أن هذا ليس الرابط الذي نهتم بتغييره

وهناك أمر آخر نحتاج فقط إلى تغييره بنقطة

نحن نريد الوصول إلى الرابط الموجود فعليًا في صفحة هذا المنتج

ثم نقوم بإدخال "Get attribute"

لذا، سنقوم بتحديد CSS Selector الخاص بنا

ومجددًا، بين قوسين وعلامة اقتباس

دعونا نضغط على السهم لأعلى مرة أخرى

نضع الوصف المطلوب وهو ahref في حالتنا

وفي هذه المرة، نريد فقط الحصول على الروابط التي تشتمل على

عفوًا نظرًا لوجود NodeList هنا، فيجب علينا أولًا اختيار node

عنوان ال URL الخاص بنا داخل وصف "AHREF"

وستكون هذه أول Node

كيف يمكننا فعل ذلك؟

حسنًا، ستكون الصفر

حسنًا، هناك تعديل يمكننا تنفيذه والذي سيكون بين قوسين مربعين

وبعد ذلك يمكننا الحصول على الوصف

ومن ثم الصفات التي نهتم بها

من خلال أمر ahref

وبالنسبة لنا، سيكون ’=a[href’

حسنًا، وهنا نستعيد الرابط امرتبط بعنصر HTML هذا

ومن ثم في علامتي اقتباس سندخل كيفية ملء ahref

والآن، إذا كنتَ تريد تغيير هذا

وفي حالتنا، سأهتم بعنوان ال URL الموجود بالأعلى هنا

فهناك أمر آخر

ثم ندخل هذا ونضغط إدخال

ولا نريد الحصول على هذا الوصف

وسنحصل على عنصر واحد الآن وهو رابط المنتج الخاص بنا

ولكننا نريد تعيين أو تغيير هذا الوصف

الآن، من الواضح أننا متهمون بروابط Amazon الأخرى في هذه الصفحة

لذلك سنقوم بتغيير هذا لتعيين الوصف

إذن، يمكننا كذلك التعديل ليشمل الروابط التي تشتمل على Amazon في عنوان ال URL

والآن يمكننا استخدام ahref

مثل ما يحتوي على خيار

وهذا ما نريد تغيير ونقوم بإدخال

والمعدل لهذه هو العلامة النجمية أمام علامة التساوي

ومن ثم يجب عليك إدخال ال contains الخاص بك مكانها

في حالتنا، وسيكون ببساطة Amazon

ولدينا كافة الروابط الثلاثة التي تحتوي على Amazon في عنوان ال URL المحدد

والآن فصاعدًا، يمكننا استخدام هذا الرابط

ولكن لننتقل مرة أخرى إلى محدد الاستعلام الأول هنا

حتى نتمكن فقط من رؤية كيف يمكننا تغيير رابط واحد أولًا قبل تغيير

كافة الروابط الأخرى

لذلك عدنا إلى الرابط الخاص بنا

وهذا الرابط بالضبط هو ما نريد تغييره

والآن، تغيير الروابط يتضمن الحصول على الوصف الفعلي ل ahref

لتغيير عنوان ال URL هذا

كيف يمكننا اختيار الوصف من خلال JavaScript؟

فلنعد إلى هنا

وهناك أمر آخر نحتاج فقط إلى تغييره بنقطة

ثم نقوم بإدخال "Get attribute"

ومجددًا، بين قوسين وعلامة اقتباس

نضع الوصف المطلوب وهو ahref في حالتنا

عفوًا نظرًا لوجود NodeList هنا، فيجب علينا أولًا اختيار node

وستكون هذه أول Node

حسنًا، ستكون الصفر

وبعد ذلك يمكننا وضع GetAttribute

من خلال أمر ahref

حسنًا، وهنا نستعيد الرابط المرتبط بعنصر HTML هذا

والآن، إذا كنتَ تريد تغيير هذا

فهناك أمر آخر

ولا نريد الحصول على هذا الوصف

ولكننا نريد تعيين أو تغيير هذا الوصف

لذلك سنقوم بتغيير هذا لتعيين الوصف

والآن يمكننا استخدام ahref

وهذا ما نريد تغييره ونقوم بإدخال فائدة جديدة

دعونا فقط بجرب هذا

وهذا يعيدنا إلى وضع غير محدد

ولكن ماذا سيحدث إذا عدتَ إلى جزء العناصر هنا

فسنرى أن ahref الخاص بنا تم تغييره لوضع الاختبار ببساطة

وإذا نقرتَ على هذا الزر، فسنذهب إلى صفحتنا الخاصة مع اختبار مرفق به غير موجود بالفعل

الآن، هذا لا يعني الكثير

ولكن هذه هو الأسلوب للتغيير الفعلي في رابط معين

سيتم تعيين SetAttribute إلى ahref

والرابط الذي تريده هنا

لذا، إذا أردتَ تقديم مثال أفضل

فمثلا، سنقول " دعونا نرسل هذا المستخدم إلى MeasureSchool

وإذا نقر المستخدم الآن على هذا الرابط الخاص بنا

فسينتقل إلى MeasureSchool.com

وإذن، لقد قمنا بتغيير هذا الرابط الآن

وهذا يحدث بالتأكيد فقط إذا نفذنا هذا الأمر قبل أن ينقر المستخدم على الرابط

وكن على علم الآن بأن هذا يحدث فقط عندما ينقر المستخدم على هذا الرابط

وهذا لا يحدث الآن بالنسبة للروابط الأخرى

لهذا سنحتاج إلى الإطلاع على النتائج الخاصة بنا فعليًا

ولهذا، نحتاج إلى كتابة كود آخر

ولهذا السبب سأنتقل إلى لوحة المصادر حيث يمكننا فتح المقتطفات الخاصة بنا

يمكنك إيجادهم هنا

ويمكنك كتابة المقتطف الخاص بك

لذا، سأفتح مقتطفًا جديدًا هنا

ولقد أعددتُ بالفعل شيئًا هنا

في هذا الأمر، استخدمنا مجددًا QuerySelector الخاص بنا

وسنحصل على كافة روابط Amazon

ونقوم بحفظهم في متغير يسمى الروابط

ثم نكررها على هذه الروابط ونعين الوصف إلى MeasureSchool.com

مثلما فعلنا من قبل

ولكن هذا سيحدث لكافة الروابط

يمكنك الضغط على هذا الزر هنا

وسينفذ هذا ويفتح أدوات المطور

وكما نتوقع لقد أصبح غير محدد

ولكن الآن تم تغيير كافة الروابط هنا إلى MeasureSchool.com

وسنتفحصهم هنا

وسنقوم برؤية أو تغيير هذا إلى MeasureSchool.com

والآن، هذه هي الطريقة التي يمكنك من خلالها تغيير كافة الروابط

على صفحة الويب الخاصة بك بمساعدة Google tag Manager

في الدرس القادم، سنناقش بعض حالات الاستخدام

التي نقوم فيها بتغيير الروابط

وإرفاق محتوى بالروابط

وجعل التتبع الخاص بك أفضل من خلال هذه التقنية