21

تغيير الروابط من خلال 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في الدرس القادم، سنناقش بعض حالات الاستخدام التي نقوم فيها بتغيير الروابط وإرفاق محتوى بالروابطوجعل التتبع الخاص بك أفضل من خلال هذه التقنية