时间戳

首页 > 解决方案 > 如何在博客中制作此页脚广告以仅对唯一身份访问者开放？

html - 如何在博客中制作此页脚广告以仅对唯一身份访问者开放？

问题描述

我想知道我可以对这个“页脚广告代码”做什么，以使其仅对我的博客的唯一访问开放，并且当访问者选择转到同一博客中的下一页时，如果用户不显示页脚广告之前已经关闭了。

换句话说，如果访问者来到我的页面并关闭此页脚广告，则不必显示同一用户是否在未离开的情况下从同一网站访问了我的其他博客文章或页面。

<style>
.Arpian-ads {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 70px;
    max-height: 90px; /* modify as per your website design*/
    padding: 5px 0;
    box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1);
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fefefe;
    z-index: 20;
}

.Arpian-ads-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px 0 0;
    position: absolute;
    right: 0;
    top: -30px;
    background-color: #fefefe;
    box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08);
}

.Arpian-ads .Arpian-ads-close svg {
    width: 22px;
    height: 22px;
    fill: #000;
}

.Arpian-ads .Arpian-ads-content {
    overflow: hidden;
    display: block;
    position: relative;
    text-align:center;
    height: 70px;
    width: 100%;
    margin-right: 10px;
    margin-left: 10px;
}
</style>


<div class='Arpian-ads' id='Arpian-ads'>
    <div class='Arpian-ads-close' onclick='document.getElementById(&quot;Arpian-ads&quot;).style.display=&quot;none&quot;'>
        <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
            <path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' />
        </svg>
    </div>
    <div class='Arpian-ads-content'> Place your Ad Code </div>
</div>

标签： htmlcssjsonbloggersticky-footer

解决方案

仅使用 CSS 是不可能的。如果广告容器已关闭，您可以通过设置 cookie / localstorage 来实现这一点。即使浏览器关闭，Cookie 也是持久的。如果访问者导航到不同的页面，您可以先检查是否设置了 cookie，如果未设置，您可以显示广告。

示例代码：

const ad = document.getElementById('#Arpian-ads-close');
const wasVisible = window.localStorage.get('adShown');

/**
 * remove the ad if the user closed it
 */
if(!wasVisible){
  ad.remove();
}

/*
 * add an eventListener to add the key into the localStorage
 */
ad.addEventListener('click', () => {
  window.localStorage.set('adShown', true);
  ad.remove()
});

推荐阅读