اضافة اداة تنبيه الزوار باستخدام ملفات تعريف الارتباط

 

أهمية أداة ملفات تعريف الارتباط ولماذا يجب وضعها في مدونتك:

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

أهمية الأداة للحصول على موافقة AdSense

1. **الامتثال لقوانين الخصوصية:**  

   تفرض Google AdSense الامتثال للقوانين واللوائح المحلية والدولية، بما في ذلك قوانين الخصوصية مثل اللائحة العامة لحماية البيانات (GDPR) في الاتحاد الأوروبي. من خلال استخدام أداة ملفات تعريف الارتباط، تضمن مدونتك الحصول على موافقة صريحة من الزوار على استخدام ملفات تعريف الارتباط، مما يساعد على الامتثال لمتطلبات AdSense.

2. **الشفافية مع المستخدمين:**  

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

3. **تحسين تجربة المستخدم:**  

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

4. **حماية الموقع من المشاكل القانونية:**  

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

**لماذا يجب وضعها في مدونتك:**

- **الامتثال لمتطلبات AdSense:** لضمان التوافق مع سياسات Google AdSense، مما يزيد من فرص الموافقة على عرض الإعلانات في مدونتك.

- **تعزيز الثقة:** لبناء علاقة موثوقة وشفافة مع الزوار من خلال توفير معلومات واضحة حول استخدام البيانات.

- **تحسين الأداء الإعلاني:** لزيادة فعالية الإعلانات من خلال تخصيصها بناءً على تفضيلات المستخدمين، مما يمكن أن يؤدي إلى زيادة الإيرادات.

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

تركيب الاداة

الدخول إلى لوحة التحكم في Blogger:  

سجّل الدخول إلى حسابك في Blogger وانتقل إلى لوحة التحكم الخاصة بالمدونة التي تريد تعديلها.

الوصول إلى التخطيط:  

في القائمة الجانبية، انقر على "التخطيط".

إضافة أداة جديدة:  

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

اختيار نوع الأداة:  

من القائمة التي تظهر، اختر "HTML/JavaScript". ستظهر لك نافذة جديدة لإضافة الكود.

إضافة الكود:  

في مربع "العنوان"، يمكنك تركه فارغًا أو كتابة عنوان للأداة حسب الحاجة. في مربع "المحتوى"، أدخل الكود التالي

      <div class="blfym-CookieBox">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhuzSHlv7Bn88mupD8lar42B4OajXfIvR_PNEFGT90L5U5BjVJ6UqZ-VvzS96nBXDYungiIAKeWmhSLRPqhzHwM-MH9jayDe72DW6Mo37EtEQ7E0FvNECDrx1Qjq4aNuFm5p-vEjqujYbf/s512/BergStockCookie.png" alt="تعريف الارتباط" />
    <div class="blfym-CookieContent">
        <p>نستخدم ملفات تعريف الارتباط لضمان حصولك على أفضل تجربة.</p>
        <div class="blfym-CookieButtons">
            <button class="blfym-Items">قبول</button>
            <a href="https://policies.google.com/technologies/partner-sites" class="blfym-Items" target="_blank">معرفة المزيد</a>
        </div>
    </div>
</div>


<script>

const CookieBox = document.querySelector(".blfym-CookieBox");
const AcceptBergCookie = CookieBox.querySelector(".blfym-Items");

// When the user clicks the 'Accept' button
AcceptBergCookie.onclick = () => {
    // Save the cookie for 3 days
    document.cookie = "Cookie=BergStock; max-age=" + 60 * 60 * 24 * 3;
    if (document.cookie) { // If cookie is set
        CookieBox.classList.add("hide"); // Hide the cookie box
    } else { // If cookie is not set
        alert("يرجى تعطيل الحظر على ملفات تعريف الارتباط");
    }
}

// Check if the cookie is set
let CheckBergCookie = document.cookie.indexOf("Cookie=BergStock");
// If the cookie is set, hide the cookie box
CheckBergCookie != -1 ? CookieBox.classList.add("hide") : CookieBox.classList.remove("hide");

</script>
<style>
/* https://blfym.blogspot.com */
.blfym-CookieBox {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 350px;
    background: #fff;
    padding: 20px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* https://blfym.blogspot.com */
.blfym-CookieBox.hide {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
}

/* https://blfym.blogspot.com */
.blfym-CookieBox::selection {
    background: #FFC107;
    color: #fff;
}

/* https://blfym.blogspot.com */
.blfym-CookieBox img {
    max-width: 60px;
    margin-bottom: 10px;
}

/* https://blfym.blogspot.com */
.blfym-CookieContent p {
    padding: 0 10px;
    line-height: 1.6;
    color: #333;
    font-size: 15px;
}

/* https://blfym.blogspot.com */
.blfym-CookieButtons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}

/* https://blfym.blogspot.com */
.blfym-CookieButtons button, .blfym-CookieButtons a {
    padding: 8px 20px;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    margin: 5px;
}

/* https://blfym.blogspot.com */
.blfym-CookieButtons button {
    color: #fff;
    background: #007BFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* https://blfym.blogspot.com */
.blfym-CookieButtons button:hover {
    background: #0056b3;
    transform: scale(1.02);
}

/* https://blfym.blogspot.com */
.blfym-CookieButtons a {
    color: #007BFF;
    background: #f9f9f9;
}

/* https://blfym.blogspot.com */
.blfym-CookieButtons a:hover {
    background: #f0f0f0;
}

/* https://blfym.blogspot.com */
@media only screen and (max-width: 680px) {
    .blfym-CookieBox {
        width: 90%;
        border-radius: 8px;
    }

    .blfym-CookieBox img {
        display: none;
    }

    .blfym-CookieButtons {
        flex-direction: column;
    }

    .blfym-CookieButtons button, .blfym-CookieButtons a {
        width: 80%;
    }
}
</style>

  

وبهذه الطريقه تكون اضفت الاداة