Hubungi dukungan

Kami membalas melalui e-mail, biasanya dalam dua hari.

Google reCAPTCHA memeriksa kiriman ini untuk mencegah penyalahgunaan; data dikirim ke Google. Skrip hanya dimuat saat formulir ini dibuka.

← Semua artikel

Menambahkan penghitung Stats4U dengan Google Tag Manager

· Lukas Wojcik

Ada panduan tentang hal ini di blog dari tahun 2015. Tangkapan layarnya menampilkan Tag Manager yang tampilannya sudah tidak seperti itu lagi, dan salah satu dari tujuh langkahnya — mencentang document.write — sama sekali tidak diperlukan lagi. Artikel ini menggantikannya.

Artikel ini juga menjawab pertanyaan yang tidak terjawab oleh panduan lama. Panduan itu menyarankan penghitung tak terlihat untuk Tag Manager, dengan alasan bahwa posisi gambar Stats tidak dapat diatur. Ternyata bisa. Caranya ada di bagian bawah halaman ini.

Versi singkat

Di Tag Manager: Tags → New → Custom HTML, lalu tempelkan satu baris ke kolom HTML:

20157 — langkahhari ini3 — kolom dan satu pemiculangkah document.write sudah tidak ada — skrip tidak lagi menggunakannya 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

Pemicunya diatur ke All Pages; lalu simpan dan publikasikan kontainernya. Atribut data-id diisi dengan nomor penghitung, yang tercantum di halaman statistik.

Hanya itu yang perlu dilakukan — tiga kolom dan satu pemicu, sedangkan pada 2015 diperlukan tujuh langkah. Tidak ada yang perlu dicentang terkait document.write, karena skrip tidak lagi menggunakannya.

Apa yang sebenarnya terjadi, dan mengapa ini mungkin bukan pilihan yang tepat

Skrip menempatkan penghitung tepat setelah dirinya sendiri di halaman. Jika ditempelkan langsung ke HTML yang ditulis tangan, hal itu tepat sekali: penghitung muncul di tempat kode berada.

Melalui Tag Manager, keadaannya berbeda, karena penempatannya tidak lagi dapat dipilih dengan bebas. Kontainerlah yang menentukan, dan kontainer biasanya berada di bagian head dokumen atau di mana pun cuplikan kontainer dipasang. Jadi penghitung disisipkan di sana — bukan di footer, bukan di sidebar, melainkan di mana pun Tag Manager kebetulan menyuntikkan tag tersebut.

Hal ini sama sekali tidak penting untuk penghitung tak terlihat — itulah sebabnya panduan lama menyarankannya. Desain 980 tidak menampilkan apa pun, desain 981 hanya menampilkan ikon kecil yang menautkan ke halaman statistik. Dalam hal ini, versi singkat di atas sudah lengkap dan sisa artikel ini bersifat opsional.

Menempatkan penghitung yang terlihat di lokasi tertentu memerlukan sedikit langkah tambahan.

Mengatur di mana penghitung muncul

Skrip ini memiliki mode kedua yang tidak pernah disebutkan dalam panduan lama. Sebagai ganti atribut data-id itu, skrip menerima sebuah daftar dan mencari elemen penampung berdasarkan ID.

Langkah pertama — penampung di halaman, di tempat penghitung seharusnya berada. Penampung ini dimasukkan ke templat situs itu sendiri, bukan ke Tag Manager, karena justru Tag Manager-lah yang ingin kita jauhkan dari keputusan ini:

<div id="s4u_cp0"></div>

Langkah kedua — di Tag Manager, kode ini menggantikan kode satu baris tadi. Jenis tag Custom HTML yang sama:

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

Langkah ketiga — ubah pemicunya. Inilah bagian yang sering menjebak. All Pages dijalankan sedini yang dimungkinkan Tag Manager, sering kali sebelum penampung ada di dokumen. Pemicu bawaan DOM Ready adalah pemicu yang tepat di sini. Penghitung harus muncul setelah div, bukan sebelumnya.

Kini penghitung muncul di dalam div tersebut, dan tidak di tempat lain.

Mengatur halaman mana yang menampilkannya

Ada dua cara pengaturan yang tidak saling bergantung di sini, dan keduanya layak dipahami secara terpisah.

Penampung adalah salah satunya. Baris pertama di dalam fungsi yang melakukannya: jika tidak ada s4u_cp0 di halaman, fungsi berhenti dan skrip bahkan tidak pernah diunduh. Jadi templat yang memuat div tersebut mendapat penghitung, dan templat yang tidak memuatnya tidak mendapatkannya — diputuskan di templat situs itu sendiri, tanpa perubahan di Tag Manager dan tanpa langkah publikasi.

Pemicu adalah yang lainnya. Keputusan yang sama juga dapat diambil di Tag Manager: sebuah kondisi pada pemicu, sehingga pemicu hanya aktif pada DOM Ready jika Page Path cocok. Pemicu cocok untuk aturan tentang URL, penampung cocok untuk aturan tentang templat.

Lebih dari satu penghitung di satu halaman

Daftar ini dapat berisi sebanyak yang diperlukan. Posisi dalam daftar adalah angka pada ID penampung:

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

Yang pertama masuk ke s4u_cp0, yang kedua ke s4u_cp1. Keduanya diperiksa di browser saat artikel ini ditulis: yang pertama tampil sebagai ikon 20 kali 20, yang kedua sebagai strip 162 kali 25, masing-masing di dalam penampungnya sendiri dan tidak di tempat lain di halaman.

Empat hal yang sering menjebak

  • Kedua metode tidak boleh dicampur. Tag yang memiliki data-id sebagai atribut dan sekaligus menetapkan daftar akan menghasilkan dua penghitung, dan kedua tayangan itu dihitung secara terpisah.
  • Daftar selalu memerlukan s4ustyleid. Atribut data-style diam-diam kembali ke desain 30 jika tidak ada. Versi daftar tidak memiliki cadangan seperti itu dan akan meminta desain kosong.
  • Penampung yang tidak ada gagal tanpa pesan. Tidak ada penghitung, tidak ada pesan galat, tidak ada apa pun di konsol. Jika tidak ada yang muncul, ID adalah hal pertama yang patut dicurigai — s4u_cp0, dengan angka nol, bukan huruf O.
  • Penghitung tak terlihat sengaja tidak memiliki tautan. Desain 980 ditampilkan tanpa tautan, karena target klik transparan berukuran satu piksel di halaman milik orang lain adalah jebakan, bukan fitur. Jika memerlukan tautan, gunakan desain 981 dengan ikon kecilnya.

Memeriksa apakah berhasil

Mode Preview di Tag Manager memuat halaman dengan kontainer aktif. Tag seharusnya muncul di antara tag yang dijalankan pada peristiwa DOM Ready. Halaman statistik kemudian mengonfirmasinya — kunjungan melalui Preview dihitung seperti kunjungan lainnya, sehingga angkanya seharusnya berubah dalam beberapa detik.

Jika tag dijalankan tetapi tidak ada yang muncul, penyebabnya adalah penampung atau pemicu, sesuai urutan kemungkinannya.

Iklan