كيفية تحميل الإعلانات دون إبطاء مدونتك على بلوجر

هذه المقالة موجهة للمدونين الذين يعتمدون على تقنية صفحات الجوال المسرعة (AMP)، ولا يعرضون إعلانات AMP

تتسبب الإعلانات أحيانا في بطء المواقع، وبالأخص تلك المواقع المستضافة على المنصات المجانية كمدونات بلوجر، وهذا ما يزعج المستخدمين في غالب الأحيان، وفي هذا المقال سأريك كيفية تحميل الإعلانات دون إبطاء مدونتك على بلوجر، فقط تابع القراءة.

كسب المال من خلال التدوين هي غاية كل مدون، ولهذا السبب يتم نشر الإعلانات أو الترويج لبعض المنتجات التابعة على المدونات. وعند الحديث عن جانب الإعلانات، هناك الكثير من الشبكات الإعلانية المتاحة على الإنترنت ومن أبرها جوجل أدسنس، هناك أيضا الكثير من الشبكات الإعلانية البديلة، ولكن عليك أولا الحصول على تصنيف جيد على محركات البحث، للاستفاذة من أكبر قدر ممكن من الزيارات.

وللحصول على تصنيف جيد على محركات البحث كجوجل مثلا، يتوجب كل مدونة أن تستوفي معايير معينة من بينها سرعة الصفحات، وقد تتسبب الإعلانات التي تعرضها على مدونتك في إبطاء سرعة تحميل الصفحات، لأن الشبكات الإعلانية تستخدم جافا سكريبت لعرض إعلاناتها لدى الناشرين، والحل هنا يكمن في أن تجعل هذه الإعلانات يتم تحميلها بشكل غير متزامن أو بعد اكتمال تحميل المستندات المهمة أولا.

إذا كنت تستخدم إعلانات جوجل أدسنس فلن تواجه أي مشكلة بخصوص سرعة الصفحات، وذلك لاعتماد الشبكة على تقنيات تحميل النص غير المتزامن والتي بدورها لا تعيق تحميل الصفحات، أما بخصوص بعض الشبكات التي لا توفر شفرات الإعلانات غير المتزامنة فقد يؤدي استخدامها إلى إبطاء صفحاتك بشكل كبير.

لهذا سأشرح لك كيفية تحميل شفرات الإعلانات غير المتزامنة دون إبطاء مدونتك على بلوجر، وهذا الشرح ينطبق فقط على اللافتات الإعلانية.

كيف يمكنك معرفة ما إذا كانت الإعلانات تزيد من وقت تحميل الصفحات

بعض الإعلانات التي يتم تحميلها تمنع تحميل محتوى الصفحة، وهذه بالذات تعتبر بمثابة عناصر حظر للعرض، وباستخدامك لبعض أدوات اختبار سرعة الصفحات كـ Webpagest و Pingdom، يمكنك العثور وبسهولة على أكواد هذه الإعلانات.

فوائد وتعليمات بخصوص تحميل الإعلانات بشكل غير متزامن

أولا يجب عليك معرفة كيف تقوم محركات البحث بحساب وقت تحميل الصفحات؟ والجواب هنا أنها تقوم بحساب المدة التي يستغرقها تحميل محتوى الصفحة بالكامل، لهذا يتوجب عليك عرض الإعلانات والمؤثرات الأخرى بعد التحميل الكامل لمحتوى الصفحة، وهذا سيكون مفيدا لمدونتك بشكل كبير:

  • تحسين سرعة صفحات المدونة
  • خفض معدل الارتداد
  • تحسين تصنيف المدونة على محركات البحث
  • المزيد من الزيارات الواردة على المدونة
  • المزيد من الأرباح

لعرض الإعلانات بعد التحميل الكامل لمحتوى الصفحة، يتوجب علينا اتباع ثلاث خطوات وهي:

  • تحليل الأكواد وإنشاء صفحة لأكواد الإعلانات
  • تضمين الكود وصحة الإعلان في قالب المدونة
  • بما في ذلك عناصر div لتحميل الإعلانات

تحليل الأكواد وإنشاء صفحة لأكواد الإعلانات

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

كخطوة أولا يجب تحليل كود الإعلان، وأقصد بهذا تحويل الكود من HTML إلى XML، ويمكنك فعل هذا بنقرة واحدة باستخدام بعض الأدوات المتوفرة على النت، n-Tools هو أحد المواقع التي توفر لك هذه الأداة إضافة إلى بعض الأدوات الأخرى التي قد تحتاجها كمدون.

مثال:

...

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

الكود بعد التحليل

...
&lt;script async src=&quot;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;

هذا مجرد مثال لتعلم كيف يبدو الكود بعد التحليل، حيث يتم تحويل رمز < إلى  &lt; و > إلى  &gt; يتم أيضا تحويل & إلى &amp; وعدة رموز أخرى لم أذكرها، لهذا يجب عليك استخدام إحدى أدوات تحليل الأكواد لتفادي الأخطاء التي يمكن أن ترتكبها عبر تحويل الكود يدويا.

بهذه الحيلة، سيتم تحميل إعلانات البانر كإطارات iframe، لهذا يجب عليك إنشاء صفحة لتحميل الإعلانات.

  • انتقل إلى الواجهة الرئيسية على بلوجر ثم اختر "الصفحات" على لوحة التحكم الجانبية.
  • أنشئ صفحة جديدة
  • أكتب advertising-box أي مربع الإعلان أو يمكنك أن تختار اسما أخر شريطة أن يكون باللغة الإنجليزية.
  • قم بنشر الصفحة.

ستلاحظ أن رابط الصفحة يبدو على هذا الشكل.

https://example.com/p/advertising-box.html

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

تضمين الكود وصفحة الإعلان في قالب المدونة

الخطوة الثانية هي تضمين الكود الذي تم تحليله مع رابط صفحة الإعلانات التي قمت بإنشاءها في قالب المدونة، يمكنك نسخ هذا الكود وتغيير الرابط برابط صفحة الإعلانات التي أنشأتها للتو، ثم قم بوضع سكريبت الإعلان الذي قمت بتحليله في المكان المحدد، ثم وسأخبرك فيما بعد أين تضع هذ الكود.

...

<b:if cond='data:blog.url == &quot;https://example.com/p/advertising-box.html&quot;'>
ضع كود السكريبت الذي قمت بتحليلة هنا
</b:if>

ألق نظرة على الكود أدناه، يمكنك تعديل العرض والارتفاع وفقا لاحتياجاتك إضافة إلى رابط الصفحة التي قمت بإنشاءها، بعدها يمكنك إلصاق الكود ضمن قسم body ويفضل أن يكون في أسفل القالب فوق علامة </body> مباشرة.

...

<script type="text/javascript">/*<![CDATA[*/
(function(){
function loadAds() {
var c1 = "<iframe frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" width=\"250\" height=\"250\" src=\"https://example.com/p/advertising-box.html\"></iframe>";
var adauth1 = document.getElementById('AdAuth1');
if(adauth1!=null) adauth1.innerHTML=c1;
 }
var oldonload = window.onload;
window.onload = (typeof window.onload != 'function') ? loadAds : function() { oldonload(); loadAds(); };
})();
/*]]>*/
</script>

في حالة كنت ترغب في عرض وحدتين إعلانيتين مختلفتين أو أكثر على الصفحة، فستحتاج إلى إضافتها بشكل متسلسل من خلال اضافة (c2 و adauth2) و (c3 و adauth3) كما في المثال التالي.

...

var c1 = "<iframe frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" width=\"250\" height=\"250\" src=\"https://example.com/p/advertising-box.html\"></iframe>";
var c2 = "<iframe frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" width=\"250\" height=\"250\" src=\"https://example.com/p/advertising-box.html\"></iframe>";
var adauth1 = document.getElementById('AdAuth1');
if(adauth1!=null) adauth1.innerHTML=c1;
var adauth2 = document.getElementById('AdAuth2');
if(adauth2!=null) adauth2.innerHTML=c2;

عودة إلى الكود الأول، ولتحميل الإعلانات دون إبطاء مدونتك على بلوجر، ستضع الكود على مرتين، أولا في قسم head وأيضا في قسم body، بالطريقة التي سأعرضها عليك الآن.

أولا يتقسم الكود إلى جزئين الجزء الذي يظهر أدناه ستلصقه فوق علامة <b: skin> وأيضا أسفل علامة <body>.

...

<b:if cond='data:blog.url == &quot;https://example.com/p/advertising-box.html&quot;'>

وستضع علامة الاقفال أعلى علامة </head> وأيضا أعلى علامة </body>.

...

</b:if>

كخطوة أخيرة أضف الشفرة التالية حيثما تريد عرض الإعلان، مع مراعات تساوي عدد شروط if وعلامات الإغلاق، بما في ذلك كل عناصر div لتحميل الإعلانات.

<div id = "AdAuth1"/>

إذا كنت أضفت أكثر من وحدة إعلانية، فيمكنك إضافة

<div id = "AdAuth2"/>

في هذه الحالة لا يمكنك استخدام نفس علامة div في مكانين مختلفين، لأنه يجب أن يكون لكل وحدة إعلانية علامة div مخصصة، ولعرض المزيد من الوحدات الإعلانية يجب إنشاء متغيرات وفقا لذلك.

أنا محمد، مالك مدونة صور نت للمعلوميات والرقمنة، أمتلك خبرة واسعة في تحسين محركات البحث (السيو)، ومهتم بشكل خاص بمجالات التسويق الرقمي والتكنولوجيا المالية الرقمية.