PS：代码示例里的优惠码什么的都是瞎编的。
Google Ads API 开发文档： developers.google.com/google-ads/...
页面加载后立即弹出
这种广告在用户打开网页后立即显示，适合展示重要的欢迎信息或首次访问优惠。
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="modal-overlay" id="popupModal">
<div class="modal">
<button class="close-btn" id="closeModal"><i class="fas fa-times"></i></button>
<h2>欢迎访问</h2>
<p>感谢您访问我们的网站！我们为您准备了专属优惠。</p>
<p>使用优惠码 <strong>WELCOME10</strong> 可享受9折优惠。</p>
<div class="modal-actions">
<button class="primary" id="acceptOffer">查看详情</button>
<button id="declineOffer">关闭</button>
</div>
</div>
</div>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background: white;
border-radius: 8px;
width: 90%;
max-width: 450px;
padding: 30px;
position: relative;
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 22px;
color: #999;
cursor: pointer;
}
.modal-actions {
display: flex;
gap: 10px;
margin-top: 25px;
}
button {
padding: 10px 20px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
color: #333;
cursor: pointer;
flex: 1;
}
button.primary {
background: #333;
color: white;
border-color: #333;
}
</style>
<script>
const modal = document.getElementById('popupModal');
const closeBtn = document.getElementById('closeModal');
const acceptOfferBtn = document.getElementById('acceptOffer');
const declineOfferBtn = document.getElementById('declineOffer');
function closeModal() {
modal.style.display = 'none';
}
closeBtn.addEventListener('click', closeModal);
declineOfferBtn.addEventListener('click', closeModal);
acceptOfferBtn.addEventListener('click', function() {
alert('正在跳转到优惠详情页面...');
closeModal();
});
modal.addEventListener('click', function(e) {
if (e.target === modal) {
closeModal();
}
});
</script>延迟弹出广告（3秒后显示）
这种广告在页面加载后延迟几秒显示，让用户先浏览内容，减少对初始体验的干扰。
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="modal-overlay" id="popupModal">
<div class="modal">
<button class="close-btn" id="closeModal"><i class="fas fa-times"></i></button>
<h2>特别优惠</h2>
<p>您已浏览我们的网站一段时间，我们为您准备了专属优惠。</p>
<p>使用优惠码 <strong>DELAY15</strong> 可享受85折优惠。</p>
<div class="modal-actions">
<button class="primary" id="acceptOffer">立即使用</button>
<button id="declineOffer">稍后再说</button>
</div>
</div>
</div>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background: white;
border-radius: 8px;
width: 90%;
max-width: 450px;
padding: 30px;
position: relative;
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 22px;
color: #999;
cursor: pointer;
}
.modal-actions {
display: flex;
gap: 10px;
margin-top: 25px;
}
button {
padding: 10px 20px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
color: #333;
cursor: pointer;
flex: 1;
}
button.primary {
background: #333;
color: white;
border-color: #333;
}
</style>
<script>
const modal = document.getElementById('popupModal');
const closeBtn = document.getElementById('closeModal');
const acceptOfferBtn = document.getElementById('acceptOffer');
const declineOfferBtn = document.getElementById('declineOffer');
function showModal() {
modal.style.display = 'flex';
}
function closeModal() {
modal.style.display = 'none';
}
closeBtn.addEventListener('click', closeModal);
declineOfferBtn.addEventListener('click', closeModal);
acceptOfferBtn.addEventListener('click', function() {
alert('优惠码 DELAY15 已应用！');
closeModal();
});
modal.addEventListener('click', function(e) {
if (e.target === modal) {
closeModal();
}
});
setTimeout(showModal, 3000);
</script>退出意图检测弹出广告
这种广告在检测到用户准备离开页面时触发，适合挽留用户或提供最后时刻的特别优惠。原理是检测用户鼠标到了浏览器顶部，有 X 掉网站的嫌疑。
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="modal-overlay" id="popupModal">
<div class="modal">
<button class="close-btn" id="closeModal"><i class="fas fa-times"></i></button>
<h2>请不要离开！</h2>
<p>我们注意到您准备离开，为您准备了特别优惠。</p>
<p>使用优惠码 <strong>STAY20</strong> 可享受8折优惠。</p>
<div class="modal-actions">
<button class="primary" id="acceptOffer">留下来看看</button>
<button id="declineOffer">仍然离开</button>
</div>
</div>
</div>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background: white;
border-radius: 8px;
width: 90%;
max-width: 450px;
padding: 30px;
position: relative;
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 22px;
color: #999;
cursor: pointer;
}
.modal-actions {
display: flex;
gap: 10px;
margin-top: 25px;
}
button {
padding: 10px 20px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
color: #333;
cursor: pointer;
flex: 1;
}
button.primary {
background: #333;
color: white;
border-color: #333;
}
</style>
<script>
const modal = document.getElementById('popupModal');
const closeBtn = document.getElementById('closeModal');
const acceptOfferBtn = document.getElementById('acceptOffer');
const declineOfferBtn = document.getElementById('declineOffer');
function showModal() {
modal.style.display = 'flex';
}
function closeModal() {
modal.style.display = 'none';
}
closeBtn.addEventListener('click', closeModal);
declineOfferBtn.addEventListener('click', closeModal);
acceptOfferBtn.addEventListener('click', function() {
alert('优惠码 STAY20 已应用！');
closeModal();
});
modal.addEventListener('click', function(e) {
if (e.target === modal) {
closeModal();
}
});
document.addEventListener('mouseout', function(e) {
if (e.clientY < 10) {
showModal();
}
});
</script>