Skrip Penggantian Konten di Situs Web untuk Pengujian A/B

Jika Anda seorang marketer atau spesialis SEO, Anda pasti tahu betapa pentingnya menguji hipotesis secara rutin: judul, gambar, ajakan bertindak, dan formulir yang memengaruhi perilaku pengguna serta konversi.

Namun peluncuran pengujian A/B sering kali terhambat oleh kesulitan teknis. Anda perlu mengubah kode, menunggu bantuan dari developer, menyetujui perubahan dengan tim IT, dan pada akhirnya tes ditunda atau hanya dijalankan satu kali dalam setengah tahun.

Skrip penggantian dari QForm menyelesaikan masalah tersebut. Dengan skrip ini, konten berubah langsung di browser pengguna tanpa mengubah server atau melibatkan developer. Anda hanya perlu menautkan skrip, membuat file berisi varian (channel.json), dan meletakkannya di situs Anda.

Penggantian konten terjadi secara otomatis, pengguna hanya melihat satu versi yang ditentukan oleh sistem, dan informasi langsung dikirim ke Yandex.Metrica.

Mesin pencari tetap melihat konten asli, karena penggantian terjadi setelah halaman dimuat. Artinya, alat ini aman dari sudut pandang SEO.

Bagaimana Cara Kerjanya: Dari Skrip hingga Penggantian

Skrip QForm memeriksa grup pengujian mana tempat pengguna berada dan berdasarkan aturan yang telah ditentukan, mengganti konten pada elemen yang sesuai di halaman.

Untuk memastikan semuanya berjalan dengan benar, lakukan tiga langkah:

Tautkan Skrip

Tambahkan baris ini di dalam tag <head> atau sebelum </body>:

html

<script defer src="https://storage.yandexcloud.net/script/channel/channel.js"></script>

Tentukan Elemen di Halaman

Di halaman terdapat blok HTML di mana Anda mengganti konten untuk berbagai versi. Cukup beri mereka class CSS yang jelas.

Contoh:

html

<div class="text-1">Judul Default</div>
<div class="text-2"><img src="default.jpg"></div>

Skrip akan menemukan semua blok dengan class text-1 dan text-2 dan menggantinya sesuai dengan pengaturan di file JSON. Anda menentukan sendiri nama class, yang penting cocok dengan key di file JSON.

Buat File channel.json

Setelah class ditentukan, buat konfigurasi varian. Ini dilakukan di file channel.json, yang harus ditempatkan di root situs.

Contoh:

{
  "yandexCounterId": 123456789,
  "channels": {
    "variant-a": {
      "text-1": "Judul untuk Varian A",
      "text-2": "<img src='https://site.ru/banner-a.jpg'>"
    },
    "variant-b": {
      "text-1": "Judul untuk Varian B",
      "text-2": "<img src='https://site.ru/banner-b.jpg'>"
    }
  }
}

Hal penting:

  • yandexCounterId – ID Metrica untuk mengirim event berdasarkan nama varian.
  • channels – daftar semua varian yang diuji.
  • text-1, text-2 – key yang cocok dengan class CSS di halaman. Nilainya adalah HTML yang akan ditampilkan.

File ini dapat berisi jumlah varian dan blok yang tidak terbatas. Anda bisa mengganti teks, HTML, gambar, formulir, tombol, iframe, widget video, dll.

Apa yang Bisa Diuji: Contoh Penggantian A/B

Skrip QForm memberi kebebasan penuh untuk eksperimen: Anda dapat mengganti elemen apa pun di halaman untuk melihat apa yang benar-benar bekerja dengan audiens Anda. Berikut adalah contoh praktis:

Judul

Uji mana formulasi yang paling menarik perhatian:

"text-1": "Buruan beli sebelum akhir minggu"

atau

"text-1": "Diskon 20% hanya hari ini"

Pengujian seperti ini membantu Anda dengan cepat melihat mana judul yang mendapat lebih banyak klik atau mempertahankan pengguna lebih lama.

Gambar dan Banner

Bandingkan visual yang mempengaruhi kesan pertama. Ini cara bagus untuk menguji banner berputar, di mana setiap pengguna melihat versinya sendiri:

"text-2": "<img src='img/banner-a.jpg'>"

atau

"text-2": "<img src='img/banner-b.jpg'>"

Tombol dan CTA

Eksperimen dengan teks tombol atau desainnya:

"text-3": "<button class='btn'>Dapatkan Penawaran</button>"

atau

"text-3": "<button class='btn'>Lihat Harga</button>"

Formulir QForm

Tampilkan versi formulir yang berbeda: dengan video, tanpa video, panjang berbeda:

"text-4": "<div data-formid='form_a'></div>"

atau

"text-4": "<div data-formid='form_b'></div>"

Video dan Widget

Uji salam, penjelasan, atau demo:

"text-5": "<div data-widget='videowidget_a'></div>"

atau

"text-5": "<div data-widget='videowidget_b'></div>"

Semua penggantian dikirim sebagai goals ke Yandex.Metrica. Anda bisa melacak dengan jelas mana varian yang memberikan hasil terbaik—berdasarkan tayangan, klik, pengiriman formulir, dan lainnya.

Bagaimana Skrip Bekerja Bersama QForm

Salah satu keuntungan utama skrip ini adalah integrasinya dengan alat QForm lainnya. Ini memungkinkan Anda bukan hanya mengganti konten visual, tapi membangun funnel lengkap: dari tayangan hingga pengiriman ke CRM.

Contoh Proses:

  1. Pengguna masuk ke situs dan mendapat varian A atau B.
  2. Skrip mengganti konten: teks, banner, atau formulir.
  3. Pengunjung mengisi formulir QForm.
  4. Sistem otomatis meneruskan segmennya ke formulir (melalui cookie atau utm).
  5. Permintaan masuk ke CRM, dan Anda langsung melihat dari varian mana itu berasal.
  6. Metrica mencatat goal dengan nama varian.

Integrasi Memungkinkan:

  • menggunakan beberapa formulir di satu halaman;
  • melihat di CRM dari varian mana lead berasal;
  • meluncurkan tindakan otomatis (misalnya, pengiriman penawaran);
  • mengumpulkan dan memfilter data berdasarkan segmen;
  • mendapatkan analitik pengujian tanpa kerja manual.

Mengapa Ini Nyaman dan Efisien

Pengujian menggunakan skrip QForm jauh lebih mudah dan cepat dibandingkan solusi klasik yang memerlukan pengeditan kode.

Menyiapkan pengujian memakan waktu minimal: satu skrip + satu file berisi varian. Semuanya dibaca dan diperbarui tanpa risiko merusak situs atau mengganggu fungsionalitasnya.

Anda sendiri yang menentukan apa yang akan diubah: judul, gambar, formulir, tombol, video. Semuanya dikonfigurasi melalui file channel.json, artinya Anda tidak bergantung pada developer.

Skrip ini cocok untuk semua jenis situs: Tilda, WordPress, Bitrix, CMS buatan sendiri. Goals langsung dikirim ke Metrica, dan data segmen diintegrasikan ke dalam formulir dan laporan QForm.

Ini memungkinkan marketer bekerja secara efisien: pikirkan hipotesis → jalankan → lihat hasil → tetapkan solusi terbaik.

Keamanan dan Dampaknya Terhadap SEO

Keamanan Situs

  1. Skrip bekerja di sisi klien, jadi tidak ada perubahan di server atau kode sumber situs.
  2. Script dimuat secara asynchronous (defer) dan tidak menghambat pemuatan halaman.
  3. Bahkan jika file channel.json sementara tidak tersedia, situs akan tetap berjalan tanpa error.

Dampak Terhadap SEO

  1. Bot pencarian (Yandex, Google) hanya melihat konten asli tanpa penggantian. Ini melindungi dari duplikasi dan tidak memengaruhi pengindeksan.
  2. Semua varian konten diuji pada satu halaman tanpa URL baru atau duplikat. Ini penting untuk mempertahankan posisi halaman dalam hasil pencarian.
  3. Menambahkan video widget dari QForm yang dapat diuji dengan skrip ini meningkatkan metrik perilaku: waktu di situs, keterlibatan, kedalaman tampilan. Semua ini positif untuk SEO.

Skrip telah diuji pada platform populer dan tidak memiliki konflik dengan analitik, sistem A/B testing, pembuat formulir, atau widget eksternal lainnya.

Kesimpulan

Skrip penggantian konten dari QForm adalah solusi yang nyaman dan aman untuk pengujian A/B di situs web. Semuanya dikonfigurasi hanya dalam beberapa langkah: Anda cukup menautkan skrip, membuat file JSON dengan varian, dan menunjukkan elemen mana yang harus diganti. Tidak perlu mengubah struktur situs atau menyentuh kode.

Hasil pengujian langsung masuk ke Yandex.Metrica, dan varian dapat digunakan dalam formulir, permintaan, dan sistem CRM. Ini memberi marketer kontrol penuh: varian mana yang bekerja, di mana konversi lebih tinggi, bagaimana pengguna merespons. Dan yang paling penting, tidak mengganggu SEO — bot pencarian melihat konten asli yang stabil, sementara penggantian hanya terjadi untuk pengguna nyata setelah halaman dimuat.

QForm menjadikan pengujian cepat, fleksibel, dan transparan. Ini adalah alat yang memungkinkan Anda menjalankan hipotesis bukan sekali per kuartal, tetapi setiap hari dan langsung melihat apa yang bekerja lebih baik.