如何为特定推广来源访客添加网站头部跨页面显示的自定义代码

核心实现逻辑 #

整个功能不需要依赖后端接口，完全通过前端脚本配合浏览器本地存储就能实现：

• 检测访客首次进入的链接是否携带指定推广参数（比如示例里的promo参数）
• 匹配到参数后在浏览器本地持久化标记，保证后续所有页面访问都能读取到这个状态
• 每次页面加载时校验本地标记，存在就把自定义提示条渲染到页面头部区域

具体可复用代码 #

1. 参数检测与标记存储部分，放在全局公共脚本里：

// 解析当前页面URL参数
const searchParams = new URLSearchParams(window.location.search);
// 匹配指定的推广参数，这里可以按需替换成自己的参数名
if (searchParams.has('promo')) {
    // 用localStorage存储触发标记，保证跨页面、跨会话持久有效
    localStorage.setItem('activePromoBanner', '15OFF');
}

2. 提示条渲染部分，同样放在全局公共脚本里，每个页面加载时自动执行：

// 读取本地存储的推广标记
const activePromo = localStorage.getItem('activePromoBanner');
if (activePromo) {
    // 匹配参考代码里的提示条样式，可按需修改文案
    const bannerHTML = `
    <div style="display:table;height: 40px;background-color: #f8f8f8;padding: 1px;line-height: 1.3;width: 100%;">
        <div style="display: table-cell;vertical-align: middle;">
            <div style="color: #000;text-align: center;font-size: 13px;">使用优惠码15OFF立省15%</div>
        </div>
    </div>
    `;
    // 将提示条插入到页面body最顶部，作为头部提示展示
    document.body.insertAdjacentHTML('afterbegin', bannerHTML);
}

落地注意事项 #

• 这段脚本要放在页面的head区块加载，避免页面渲染完成后提示条插入造成的布局闪烁、位置错乱问题
• 如果需要让用户手动关闭提示，可以给提示条加关闭按钮，点击后执行localStorage.removeItem('activePromoBanner')即可，后续访问不会再展示该提示
• 如果需要限制提示的展示有效期，存储标记时可以同时存入过期时间戳，加载渲染时校验时间是否在有效期内，避免永久占用页面头部空间

内容的提问来源于stack exchange，提问作者Ashley Oliver