Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
code
Html
<!DOCTYPE html>
<html>
<head>
<title>Tokopedia Star Streamer Ad</title>
<style>
body { margin: 0; overflow: hidden; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#ad-container {
width: 300px; /* Lebar standar, bisa disesuaikan */
height: 250px; /* Tinggi standar, bisa disesuaikan */
border: 1px solid #e0e0e0;
box-sizing: border-box;
position: relative;
background-color: #fff;
overflow: hidden;
color: #333;
text-decoration: none; /* Penting untuk menghilangkan underline pada link */
display: block; /* Agar click area mencakup seluruh container */
}
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Memastikan gambar menutupi seluruh area */
opacity: 0.7; /* Sedikit transparan agar teks lebih jelas */
}
#content-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 15px;
box-sizing: border-box;
z-index: 2; /* Pastikan konten di atas background */
}
.ad-title {
font-size: 22px;
font-weight: bold;
color: #2e8b57; /* Warna hijau Tokopedia */
margin-bottom: 10px;
line-height: 1.2;
}
.ad-subtitle {
font-size: 14px;
color: #555;
margin-bottom: 15px;
}
.cta-button {
background-color: #2e8b57; /* Warna hijau Tokopedia */
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
text-decoration: none; /* Hilangkan underline */
transition: background-color 0.3s ease;
}
.cta-button:hover {
background-color: #246e45; /* Warna hijau lebih gelap saat hover */
}
</style>
</head>
<body>
<!--
Penting: Seluruh area ad-container ini akan menjadi click area.
Menggunakan `href="javascript:window.open(window.clickTag)"`
agar ad server bisa menyisipkan URL tujuan dan melacaknya.
-->
<a id="ad-container" href="javascript:window.open(window.clickTag)">
<img id="background-image" src="https://images.tokopedia.net/img/cache/200-square/product-1/2020/4/18/69597379/69597379_468f7634-1191-4993-8022-ed3962d3a0e6" alt="Tokopedia Background">
<div id="content-area">
<div class="ad-title">Jadi Star Streamer Tokopedia!</div>
<div class="ad-subtitle">Raih cuan & eksposur lebih di Tokopedia Live.</div>
<div class="cta-button">Daftar Sekarang</div>
</div>
</a>
<script>
// Fallback untuk clickTag jika tidak disisipkan oleh ad server
// Pastikan URL ini adalah landing page Tokopedia Star Streamer Anda
if (typeof window.clickTag === 'undefined') {
window.clickTag = 'https://www.tokopedia.com/starstreamer';
}
// Opsional: Untuk memastikan seluruh area ad-container bisa diklik
// meskipun sudah menggunakan <a> di container.
// Ini lebih ke redundant safety, tapi tidak ada salahnya.
document.getElementById('ad-container').addEventListener('click', function(event) {
// Jika ad server sudah handle click, ini mungkin tidak perlu
// atau bisa jadi tempat untuk tracking custom jika dibutuhkan.
console.log('Ad container clicked, navigating to:', window.clickTag);
});
</script>
</body>
</html>Landing Page
URL
https://www.tokopedia.com/starstreamer
Query Parameters
None
Network Timeline
Performance Summary
2
Requests
2
Domains
8KB
Transfer Size
8KB
Content Size
97.0ms
Dom Content Loaded
120.0ms
First Paint
5,104.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...