38

كيفية إضفاء الطابع الشخصي إلى موقع الويب خاصتك بمساعدة Google Tag Manager

في هذا الفيديو سأريكم

كيف يمكنكم

إضفاء الطابع الشخصي

بمساعدة

Google Tag Manager

حيث يمكننا إخفاء

أو إظهار أو استبدال العناصر على المواقع الالكترونية

من خلال Javascript

مرحبا من جديد في فيديو اخر مقدم MeasureSchool.com لتعليم data driving way of digital markting ( طريقة التسويق الرقمي بالإستناد إلى البيانات)

وتعتمد على المستخدم الذي يزور الموقع في هذه اللحظة

واستنادا إلى المستخدم الذي يزور موقعنا في الوقت الحالي

للتعرف على المزيد أستمر في المشاهدة

أسمي جوليان

واليوم سوف نتحدث عن إضفاء الطابع الشخصي بمساعدة (Google Tag Manager)

لربما أنك قد واجهت التخصيص (إضفاء الطابع الشخصي) وخاصة عند دخولك لموقع الويب ودهشت عندما وجدته متشخص لك

يعرفون اسمك

لتلبية إحتياجاتك

ويبدوا أن الموقع يعلم من الذي يلهم الكمبيوتر

والان يمكننا القيام بكل هذه التغيرات بإستخدام (Google Tag Manager) أيضا

في الفيديو السابق اوضحت لكم كيق يمكنكم سحب البيانات من Active Compagain إلى Google Tag Manager

بحيث يكون لديك ملف متوفر لتعريف المستخدم في (Data Layer)

الان يمكننا استخدام البيانات لتخصيص موقع الويب، ما حاجتنا لهذا

حسنا اولا وقبل اي شيء نحتاج الى القليل من المعرفة عن CSS

لذا نحن نعلم كيفة إختيار العناصر بمساعدة JavaScript

حسنا في المجمل نحن نحتاج الى التعرف على مهارات JavaScript CSS

ولكن ايضا البيانات متاحة على Data Layer أو Google Tag Manager

لذا نحن لدينا بالفعل الوسائل للقيام باتخاذ القرار مع موقع الويب بناء على مراجعنا وشخصية المستخدم

الان هذه ليست افضل الممارسات هنا بإعتبار التخصيص برنامج عادي

هل بهذه الطريقة يكون أفضل من Google Tag Manager

ولكني هنا لأوضح لكم إمكانية

وقد يكون ذلك مفيدا في بعض الحالات

لذا دون مزيد من اللغط،

دعونا نتعمق بها

لكي تبدأ بإضفاء الطبع الشخصي (التخصيص) نحتاج الى بعد البيانات المتاحة

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

ك هذه البيانات يمكن ان تكون متاحة الان بداخل ملف تعريف الارتباط

وقد تكون متاحة بداخل JavaScript

اذا روجت ان تكون متاحة

الان كل هذه المعلومات يجب ان تجد طريقها ل Google Tag Manager

وقد تتوفر من خلال الجهاز (النظام) إذا دخل المستخدم الى الموقع في نفس اللحظة

لدينا وسائل مختلفة متاحة لسحب البيانات خارج ملف الارتباط على سبيل المثال

ولكن اكثر طريقة موثوقة وقياسية من وجود البيانات داخل Google Tag Manager

هو Data Layer

الان لدي Data Layer هنا

بالضغط عليها نستطيع رؤية المعلومات

المتاحة الان على صفحة المستخدم

مرة اخرى كيف نفعل ذلك

هنالك وسائل مختلفة

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

وأخبرتكم في الفيديو السابق كيف يتم سحب كهذم البيانات من Active Compagain Contact

إلى حسابك ب Google Tag Manager

ومن ثم يمكنك أستخدامها لإضفاء الطابع الشخصي

والآن هيا لنلقي نظرة على ما هو المتاح هنا

لدينا إسم المستخدم ، الإسم الأول ، الإسم الاخير، عنوان البريد الالكتروني

قيمة العمر الإفتراضي للمستخدم، وما هي إهتماماته، وما أحضره سابقا، لدينا معلومات عن أخر دخول له للموقع، وعن أخر مشترياته، معلومات عن أخر زائر

إن أخر مصدر يعتمد على أول مصدر

عند أول ظهور له على الموقع

وإذا كان مشترك في النشرة الإخبارية

الآن لدينا معلومات لسحبها إلى Data Layer

إستنادا إلى نظام إدارة علاقات العملاء (CRM) على خلفيتك وما هي البيانات المتوفرة لديك عن المستخدم

ويمكنك سحبها الى DataLayer لإستخدامها لإضفاء طابعك الشخصي

لذا ماذا يمكننا أن نفعل بهذه البيانات؟

دعونا نلقي نظرة على تلك الصفحة

لدينا صفحة (مجال) جديد هنا

هيا لنبدأ بشيء سهل جدا

انت تريد أستبدال !Hi there بجعلها أكثر خصوصية وتعديل النص من خلالها

والان لإضافة أي نوع من التخصيص سوف تحتاج الي إمتلاك مهارات إختيار عنصر من JavaScript

لذا انت بحاجة إلى معرفة القليل عن CSS

ثم تحتاج إلى معرفة بعض أساليب معالجة Dom القياسية لإستبدال النص

في هذه الحالة، يمكننا تجربة كل ذلك في Developer tools

دعونا نضغط على Inspect هنا ونرى كيف يتم ترميز هذا

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

وتصفح وحدة التحكم

إذا لم تفتح معك فأضغط فقط على Escape Key سوف تفتح هنا

ويمكننا إختيار العناصر مع الملف

queryselector

وفي أقواس يمكننا وضع (CSS) خاصتك، سيكون ID ninja

و Widget forms

ونريد بعد ذلك إجتياز DOM إلى العقدة التالية هنا والتي هي Span elements

من Widget title

لنضغط Enter

ويمكننا أن نرى اللآن أن العناصر التي قمنا بإختيارها صحيحة

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

الان اريد النص لهذه العناصر الذي يمكن القيام بها باستخام The commands ومحتوى النص وخاصية الإخفاء والان يمكنني معالجته بإستخدام علامة Equel ووضع أي شيء أريده.

وأنت ترى التغيرات بالنص

الان كيف يمكننا إستخدام هذه الاوامر ( The commands)بداخل Google Tag Manager

لقد توصلت الي مثال هنا

أتريد تغير النص

لذا هذا هو أول مثال

ونسنخدم بالفعل نفس الكود هنا

الاختلاف الوحيد أنني استخدم variable، a Data Layer variabla التي بتم سحبها مباشرة من معلومات ال Data Layer الى a variable

قد فعلتها بالفعل والتي تدعى ب dlv first name

وإذا سحبنا هذه المعلومات من من ال Data Layer خاصتنا

وهذه المعلومات سوف استخدمها بداخل HTML tag account لزبوننا a variable

أضف هذا النص "!" + {{ Hi " + {{ dlv - firstName"

وقمت بتشغيل my command وسيتم تعين النص على النصوص البديلة

ادخل هنا لاتبدو صحيحة

يجب ان تكون Textcontent

الان نحن فقط بحاجة الى attach atrigger

الان أي trigger اختياره

في حالتنا هذه علينا الانتظار لاننا بالفعل تلاعبنا(عالجنا) ال DOM

لاجل ان يكون ال DOM جاهز ويتم تحميله

يمكننا فقط استخدام هذه ال commands (الاوامر) بالرغم من توافر المعلومات مسبقا

في DOM Ready

لذا علينا التأكد من أن جميع عناصر HTML في هذه الصفحة قد حملت

ويمكننا تبديل النص

لذا دعونا نجربها

لدي DOM و Triggrt مجهزين بالفعل

هيا لنحفظ هذا

وتحيث صفحتنا

ونري الان Hi John ظهرت

اذا كان إسمك مختلف سوف تختلف

وبسهولة يمكنك استبدال النص أو تغيره استنادا الى المعلومات الوجودة في Data Layer

الان شيء اخر اراه هنا وهو حقل البريد الالكتروني الخاص بك

سنجعله أسهل على المستخدم إذا قمت بملئ ذلك تلقائيا

لدينا المعلومات من جديد في ال Datalayer و البريد الالكتروني

لذا فعلت variable ,dlv email

وتسحب هذه القيمه لاعلى من ال data layer

هيا نجربها

بالفعل لدي شيئا مجهز هنا the prefil tag

منى جديد حصلت على العناصر ومن ثم ملئت القيمة ب the DIV email

لدينا سطر واحد هنا

سوف أجد ذلك في DOM Ready

هيا لنحفظ هذا ودعونا نجرب هذا

و voila، تم ملؤه مسبقا حتي لا يضطر المستخدم إلى كتابة إسمه

ولا العنوان اذا لم يسجل الدخول الى newsletter

قد استخدمت المعلومات من data layer بداخل Tags لبعض من التخصيص

يمكننا استخدام الداتا لاستخدام Varibles و Triggers خاصتنا

هيا لنلقي نظرة على البيانات مرة اخرى التي اتحناها عن هذا المستخدم

ونرى هنا انه مشترك Newsletter

دخل عن طريق الايميل اخر مرة

لذا لماذا نحن نعرض القطعة هنا

ألا يمكننا مسحها أو تخبئتها

انه من السهل جدا ان نفعل هذا بواسطه JavaScript commands

انا بالفعل جهزت شيئا هنا وهو ببساطة إختيار ninja forms widget خاصتنا

ومن ثم تغير لتعطيله ولكي تتمكن CSS من إخفائه

دعونا نجربها

ولكن هيا لنقوم بعمل spacific trigger

ولكن هيا لنقوم بعمل trigger مخصصة وهذا ينطلق بالفعل اذا كان المستخدم لدينا مشترك بالفعل في newsletter

لنقم بإنشاء trigger جديد

مرة اخري نفعل هذا على DOM readyلذلك يجب ان يكون هذا العنصر موجود لنتمكن من إخفائه

ومن ثم اختر DOM Ready Events ,ومن ثم اختيار dlv - subscriber

الذي فعلته مسبقا

اذا القينا نظرة في ال variables

نجد ان ال subscriber...true

ومن ثم نكتب Equals و true

ومن ثم عليك إخفاء العناصر

هيا لنقم بحفظ هذا

ولنجرب هذا

لذا فنحن اخفينا العناصر وواجهنا newsletter subscriber لاننا علمنا ان المستخدم قام بالإشتراك

لذا كما نرى يمكننا استخدام معلومات ال data layer و personalization

بداخل ال triggers

,وايضا للتأكيد ان Tags يغير موقع الويب

الان هيا لنلقي نظرة على data layer ونري ما هي المعلومات المتاحة

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

اشترى بعض المنتجات

ولكنه لم يشتري بعد المنتج المخصص الجديد الذي قمنا ببيعه الان

لذا يجب ان نعرف المستخدم بمنتجاتنا الحالية

ماذا عن بدائلنا

أيوجد شعار لل newsletter خاصتنا؟

حسنا، لقد جهزت شيئا بالفعل

لو ذهبنا الى قائمة personalization for replace، يمكننا أن نجد كود صغير

في الواقع هو يصنع عنصر DLF مع فئة الاعلان وإدخال صورة جديدة قد قمت بتحميلها من قبل

لذا عليك تحميل على موقعك ممتلكاتك ك صورك

تمت الاشارة الى ذلك في رمز HTML خاصتك وإدراج هذا كله في Widget

دعونا نقم بتجربتها لنذهب إلى triggers

حسنا، سنقوم بغعل New DOM Trigger

حيث سينطلق اذا لم يكن المستخدم اشترى المنتج المعروض للبيع

هيا لنذهب ونضغط DOM Ready

نحن فقط نحتاج لعرض هذا، فإذا لم يكن المستخدم ولم يكن لدينا Data Variable حاليا

بالنسبة الى منتجاتنا المعروضة هنا

سأقوم بفعل هذا

سأختار New Variable

سنقوم بفعل Data Layer a variable لمنتجاتنا المشتراة

أختر Data Layer Avariable، وسأضعه هنا

اذا سحبنا القيمة الصحيحة

اذا كان اشترى منتجاتنا المعروضة للبيع حيث نود ان نطلق Tag خاصتنا

هيا لنجرب

ونحفظ هذا

وتحديث وضع المراجعة وتصحيح الاخطاء وتحديث صفحتنا

الان نرى أنه تم استبداله او فتح Widget area خاصتنا، ولدينا شعار هنا

انه يعرض منتج المبيعات خاصتنا وهذا هو الشعار الصغير الذي أنشأته

لذلك لدينا موقع ويب مخصص لعرض شعار المستخدم عند دخوله

والمعلومات متوفرة استنادا الى البيانات التي تم شراؤها مسبقا

الان يمكن أن تكون الاشعارات لا شيء او قد لا يكون موقع الويب خاصتك على جهاز كمبيوتر

ولكن هناك طرق اخرى تعرض لك بالفعل معلومات عن الناس

لا تغير موقع الويب او تغيير شيء اضافي

واحد هذه الطرق ان تعرض HELLO BAR تصدر من اعلى او من اطار WINDOW

لنجربها

لدي Hello Bar here

هذا حقا يعمل عن طريق jquery

لذا قد قمت بتحميل jquery هنا و HTML و CSS

بالمناسبة هذا مثال اخذته عن فتى في Lunametrics

سوف اضع لكم الرابط بالاسفل

و باسفل ال trigger سوف يختار فقط مرة اخرى ان لم يشتري منتجاتنا بعد

هيا لنحفظ هذا

تقم بالتحديث ونعود لصفحتنا

والان يجب عليك ان ترى شريط العروض الخاص بنا الان لديك رمز قسيمة الشراء اذا كنت تستخدم كلمة ninja

في خاصية Personlization (اضفاء الطابع الشخصي) يمكن للمستخدم فقط رؤية من لم يشتري منتج البيع

الان مرة اخرى نفس الشيء يمكننا فعله مرة اخري مع Model Popup

لذا نقوم مرة اخرى هنا JavaScript لتحميل المزيد من Query ونموذج البرنامج المساعدmodel plugin

لدي LHTM وأدعوه بالنموذج

دعنا نجربه

ونحفظ هذا

وتحديث صفحتنا

وهنا يمكننا ان نرى ماذا لدينا، حسنا هذا متعارض بغض الشيء

هيا لنجربه مرة اخرى بدون Hello bar firing

فقط احاول التخلص من trigger انه سريع جدا

لنقوم بتحديث هذا وذاك

والان يمكننا رؤية model popup خاصتنا

وبمكننا وضع النص بها، انا وضعت هذه الصوره من الاشعارات

ولكنه حقا اي شيء ممكن هنا

انت لم تغير في تصميم الصفحة ذاتها ولكن إضافة شيء إضافي الذي يكون Model popup

وأخيرا وليس آخرا لدينا أيضا القدرة على إعادة توجيه المستخدم إذا كان لديه سمات معينة

لذا إذا رأيت المستخدم

فقط يأتي من البريد الالكتروني ، ونحن لربما اردنا ان نرسلهم لفئة معينة خاصة لمشتركين البريد الالكتروني

لذا مرة اخرى علينا إعادة توجيه المعلومات المطلوبة

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

لذا أحيانا تكون أفضل وسيلة هي إعادة توجيه JavaScript

ومع ذلك فأن personalization form (اشكال إضفاء الطابع الشخصي ) هو الذي أردت أن أظهره أيضا

حسننا لدينا redirect خاصتنا

وهذا امر بسيط لل JavaScript redirect حيث يمكننا ارساله للمستخدم الىgoogle.com

نستطيع ان نضع اي شيء نريده مثل demo shop .com

في الصفحة الرئيسية

وسوف نضعها في trigger حيث كمثال مرة اخرى

سننظر إلى data Layer

في هذه الحالة نحن لا نعالج DOM لذلك يمكننا فقط استخدام معلومات المستخدم الخاصة بنا

لذا بدلا من استخدام DOM Ready Event استخدمنا Custom Event حيث هي بيانات المستخدم (للحدث)

ونحن نريد اطلاق هذا اخر مصدر لدينا ونحن نعلك ان المستخدم دخل عن طريق البريد الالكتروني خاصته

لنحفظ هذا الحدث أخر مصدر بريد الكتروني

لنحفظ هذا

ونقوم بتحديث هذا

وعندما أذهب الى صفحتنا أعد تحميل وسوف تحدث إعادة التوجيه

وأرسله تلقائيا إلى الصفحة الرئيسية

والآن كما ترون لدينا Model popup تحدث هنا

ذلك لأننا بدأنا العرض التوضيحي وليست بيانات المستخدم الفعلية التي تأتي على الأرجح

في نوع من ملفات الارتباط

حتى نتمكن من منع فتح الاطار المنبثق مرارا وتكرارا

ولكن مرة اخرى، هذا مجرد عرض لتوضيح الطرق المختلفة لاضفاء الطابع الشخصي personalization

ونحن نقوم تلقائيا بإعادة التوجيه إلى متجر العرض التوضيحي

لذا تتوفر لديك طرق مختلفة لإضفاء الطابع الشخصي (personalization) بمساعدة Google Tag Manager

وسأجعل هذا الفيديو متاح للتحميل

بحيث يمكنك تحميله مباشرة على حسابك في Google Tag Manager

ويمكنك العثور على الرابط بالاسفل

حسنا لقد عرفت الآن

كيف يمكنك اضفاء الطابع الشخصي لموقع الويب خاصتك بمساعدة Google Tag Manager

وتعرفنا على CSS و JavaScript knowledge

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

حسنا مرة اخرى لا توجد وسيلة لممارسات مختلفة

عادة سيكون لديك فرق مواقع مخصصة تقوم فعليا بإجراء تغييرات مرئية للمستخدم

وقد يجدوا شيئا غريب عندما ينبثق شيئا ما فجأة من متصفحهم ولا يعرفون ما هو

يتمكن Google Tag Manager من القيام بهذه التغيرات ولكنها ليست أفصل ممارسة

لذا استشر فريقك قبل القيام بأي من هذه التغيرات بمساعدة Google Tag Manager , و JavaScript

لكنني أحب ان اسمع منكم

أيت ستكون هذه التقنيات مفيدة بالنسبة لكم؟

وكذلك هل لديك حيل أخرى حول كيفية إضفاء الطابع الشخصي لموقع الويب استنادا إلى Google Tag Manager

اترك لنا تعليقا بالأسفل

وكما أقول دائما إذا أعجبك الفيديو اضغط أعجبني واشترك بالقناة لفيديوا جديد مثل هذا كل أسبوع

أسمي جوليان