HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

298x248

20.5 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

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

Open in browser

URL

https://www.tokopedia.com/starstreamer

Query Parameters

None

Network Timeline

Performance Summary

Requests

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)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests