Pada akhir Januari, Simo Ahava memposting di blognya ulasan tentang kemungkinan menggunakan tag HTML Kustom di Google Pengelola Tag. Tag HTML khusus memberikan banyak peluang untuk mengubah konten di situs, tetapi Anda harus sangat berhati-hati - fitur tag dan pemrosesan mereka membawa risiko besar. Analis MediaGuru Timur Ledenyov telah menerjemahkan ulasan yang bermanfaat ini untuk Anda.Untuk beberapa waktu (sejak akhir 2012), salah satu opsi GTM yang paling signifikan adalah tag HTML Khusus. Alat ajaib ini memungkinkan GTM untuk menambahkan elemen HTML ke halaman situs web. Sejak 2012, Google Pengelola Tag telah berevolusi dari lingkungan yang terisolasi dengan templat tag khusus menjadi solusi manajemen konten sisi klien yang tidak terbatas.Dalam artikel ini, kami akan mempertimbangkan prinsip-prinsip tag HTML Khusus dan kemungkinan penerapannya.Pengisian Tag HTML Khusus
Sesuai namanya, tag HTML Khusus memungkinkan Anda menempatkan elemen HTML di halaman situs. Mari kita ciptakan:
<script>
console.log('Hello!');
</script>
<div>
<span>Hello!</span>
</div>
Tag ini menambahkan tiga elemen ke halaman:<script>, yang dikompilasi dan dieksekusi dalam JavaScript;- blok
div; <span>termasuk dalam <div>
Saat Anda menerbitkan wadah dan melihat sumber yang diperkecil dari wadah JavaScript, tampilannya seperti ini:
tag Anda yang terbentuk dengan indah terlihat seperti ini karena HTML disandikan, dan ini adalah langkah cerdas sebelum mendefinisikan string sebagai elemen HTML.Bendera enableIframeMode dan enableEditJsMacroBehavior adalah fitur lama yang tidak lagi terlihat di UI. Anda dapat membuatnya terlihat di antarmuka tag HTML Khusus jika Anda tahu caranya. Tapi itu tidak akan mempengaruhi apa pun.Jadi, Anda membuat tag HTML Khusus dan melihat bagaimana itu ditambahkan ke wadah. Tapi apa yang kemudian terjadi pada halaman, dan di mana tepatnya?Injeksi
Saat tag HTML Khusus diaktifkan di Google Pengelola Tag, mekanisme berikut ini dimulai:- Dummy dibuat
<div>, yang, menggunakan atribut .innerHTML, string kode ditambahkan yang mewakili tag HTML Kustom Anda. - Ini memaksa browser untuk memperlakukan string yang disandikan sebagai HTML, sehingga tag yang ditambahkan ke Custom HTML dikonversi ke elemen HTML.
- Satu per satu, elemen-elemen ini dihapus dari
<div>dan dilanjutkan ke injeksi. - Kemudian setiap elemen ditambahkan sebagai elemen document.body anak terakhir.
Ada beberapa nuansa dalam proses ini:- Bagaimana Google Pengelola Tag berinteraksi dengan onHtmlSuccess dan onHtmlFailure dalam antrian
- bagaimana elemen
<script>- elemen dibersihkan dari semua atribut pengguna sebelum injeksi.
Apa artinya? Segala sesuatu yang Anda masukkan di tag HTML Khusus ditambahkan ke ujung tubuh, apa pun itu pada saat injeksi. Biasanya mereka berarti footer halaman, tetapi ini tidak perlu, mengingat tata letak halaman modern.
Penting: ketika Anda menambahkan elemen baru ke halaman, Anda mulai mengatur ulang konten. Biasanya, browser harus menghitung ulang ukuran, posisi, tata letak, dan atribut elemen; sebelumnya, sekitarnya, atau bersarang di dalam elemen yang disematkan.Itu tidak mudah. Setiap item yang Anda tambahkan memperburuk masalah. Dan dalam aplikasi satu halaman, yang mungkin tidak mengatur ulang DOM antara transisi, Anda dapat mengamati ratusan elemen seperti itu pada satu halaman, yang masing-masing memperburuk kinerja lebih dan lebih. Kami akan kembali ke kesimpulan ini, tetapi sebelum kesimpulan saya akan mengatakan:Hindari menggunakan tag HTML Khusus tanpa kebutuhan yang jelas.Saya akui, sanggahan untuk artikel ini bukan tanpa ironi.Skrip Scripting HTML Khusus
Mengapa menggunakan tag ini dan menerapkan solusi manajemen tag untuk menyuntikkan elemen? Pertanyaan yang sangat bagus yang saya tidak punya jawaban cepat dan pasti.Saya dapat mengatakan bahwa sejumlah besar HTML Khusus dalam wadah dapat berbicara tentang salah satu situasi berikut:- Anda dihadapkan pada kasus yang terlalu rumit yang tidak sesuai dengan tag GTM atau template khusus.
- Anda baru mengenal GTM (atau JavaScript) dan Anda tidak mengerti bahwa tag HTML khusus apa pun dapat diganti dengan tag standar atau template khusus.
- , -, .
- , - .
- , Google Tag Manager, .
Ini adalah wadah Anda, dan tentu saja, Anda memiliki hak untuk menggunakannya sesuai keinginan Anda. Tetapi jika skenario 2 dan 3 muncul, saya sangat menyarankan Anda membuat perubahan pada status quo. Mengabaikan kompleksitas GTM dan JavaScript dapat mengganggu efek positif yang terbuka dari teknologi ini. Bekerja bertentangan dengan batasan yang ditetapkan dalam perusahaan Anda dalam jangka panjang juga akan menyebabkan ketidaksepakatan dan menyebabkan komunikasi terganggu, situs yang mengerikan dan penyimpanan informasi yang tidak dapat diandalkan.Mari kita lihat beberapa skenario di mana Anda mungkin ingin mencoba tag HTML Khusus.Menambahkan item ke tempat tertentu di halaman
Kerugian dari tag HTML Khusus adalah bahwa ia menyematkan elemen pada akhirnya <body>. Untuk apa? Jika elemen tersebut adalah komponen visual (mis., Elemen tersebut harus ditampilkan di layar), maka kemungkinan besar bahwa akhirnya <body>bukanlah tempat di mana Anda ingin melihatnya. Untuk menyiasatinya, Anda perlu menggunakan JavaScript dan metode manipulasi DOM-nya.Caranya adalah dengan menemukan beberapa elemen yang sudah ada di halaman dan menempatkan elemen baru relatif terhadapnya.Sebagai contoh, saya ingin menambahkan subpos kecil untuk halaman untuk membuatnya terlihat seperti ini:
Sekarang, jika Anda membuat Custom HTML sebagai berikut: <h3> It's really cool - I promise!</h3>, elemen ditambahkan ke akhir <body>dan tidak akan terlihat sangat baik.Jadi alih-alih saya butuhBuat elemen baru menggunakan JavaScript , dan posisikan itu relatif terhadap judul halaman.<script>
(function() {
var h3 = document.createElement('h3');
h3.innerText = "It's really cool - I promise!";
var title = document.querySelector('h1');
if (title) {
title.parentElement.insertBefore(h3, title.nextSibling);
}
})();
</script>
Hasil akhir yang Anda lihat di screenshot di atas.Ini adalah ironi halus - Anda menggunakan HTML Khusus untuk membuat elemen ( <script>) yang akan membuat elemen lain ( <h3>). Ya, alangkah baiknya jika Anda dapat mendefinisikan di HTML Khusus tempat elemen akan berada. Bahkan, akan lebih keren lagi jika ada templat khusus yang memungkinkan Anda membuat elemen dengan kemampuan untuk memilih lokasi untuk elemen tersebut. Dengan demikian, Anda tidak perlu menyuntikkan skrip di akhir kode sama sekali! Tapi kami terganggu.Menempatkan skrip <head>setinggi mungkin
Ini sebagian disebabkan oleh skenario sebelumnya, tetapi perlu perhatian khusus tergantung pada seberapa sering situasi ini muncul. Terkadang Anda ditanya: "Letakkan naskah SEPERTI BANYAK DI ATAS <head>."Jadi, Anda perlu skrip untuk berjalan di halaman sedini mungkin. Semakin tinggi elemen dalam <head>, semakin cepat browser akan memprosesnya sebagai bagian dari halaman yang ditampilkan.Tetapi keuntungan ini hilang ketika menggunakan Google Pengelola Tag. Biasanya, ketika pustaka GTM telah dimuat, pemrosesan <head>telah berakhir, dan browser melakukan render dengan kekuatan dan utama <body>. Karena itu, mencoba menambahkan skrip <head>setinggi mungkin tidak masuk akal dan sebenarnya hanya membahayakan hasil akhirnya.Mengapa? Saat Anda membuat HTML Khusus, itu membentuk elemen dan menanamkannya di<head>. Pertama, browser perlu menambahkan Custom HTML (hit kinerja), kemudian membuat elemen baru (hit kinerja lain) dan akhirnya menambahkan elemen baru ke <head>(hit kinerja).
Sebagai gantinya, Anda perlu menambahkan <script>HTML langsung ke Custom. Dengan metode ini, itu akan ditambahkan ke akhir <body>, dan browser akan menjalankannya secepat mungkin.Mengunduh kode JavaScript pihak ketiga
Mari kita lanjutkan eksperimen dari skenario sebelumnya. Misalkan Anda memiliki pengembang pihak ketiga yang kode JavaScript-nya ingin Anda unggah ke situs. Dan Anda menyadari bahwa Anda hanya perlu menambahkan elemen <script>ke halaman menggunakan HTML Khusus.Dalam hal ini, Anda tidak perlu menggunakan HTML Khusus sama sekali.Sebagai gantinya, buat templat khusus yang menggunakan API injectScript untuk memuat pustaka.Template khusus dioptimalkan untuk injeksi dan pemuatan JavaScript, dan mereka menawarkan model izin dan kebijakan untuk injeksi yang aman (lebih aman).
Di masa depan, ini akan menjadi cara terbaik untuk diterapkan<script>. Ini tidak akan membantu Anda dengan skrip lain, karena set templat JavaScript standar sangat terbatas. Karena itu, jika Anda ingin menambahkan, misalnya, pendengar acara khusus, Anda akan memerlukan tag HTML khusus.Ubah ux
Salah satu hal yang ingin Anda lakukan dengan Custom HTML adalah memodifikasi UX (pengalaman pengguna). Untuk melakukan ini, Anda dapat menggunakan sesuatu seperti spanduk cookie, Anda dapat mengubah gaya pada halaman atau menambahkannya <iframe>, yang memuat beberapa widget nyaman untuk situs e-commerce Anda.Saya ingin memperingatkan Anda tentang risiko yang terlibat dalam melakukan semua ini dengan Google Pengelola Tag.- (, Brave) / GTM. ( , ).
- / , . , HTML . Google Tag Manager , , , . querySelector() , – - .
- Ditambah dengan semua ini adalah alasan terkait kinerja yang saya sebutkan di atas. Menambahkan setiap elemen dinamis dalam urutan yang meningkat akan menurunkan kinerja halaman, yang akan mengarah pada hal-hal yang menjengkelkan: elemen khusus Anda akan mulai muncul dan menghilang; kualitas data akan menurun (ketika iframe, yang Anda ubah secara dinamis, punya waktu sebelum melakukan perubahan) hingga lambat dan pembekuan halaman, terutama di situs satu halaman.
Karena itu, jangan menganggap penggunaan Google Pengelola Tag sebagai sistem manajemen konten.temuan
Ini adalah ikhtisar singkat tentang fitur tag HTML Khusus.Jika saya dapat berbicara sendiri pada tahun 2012, saya akan menyarankan diri saya untuk mempertimbangkan kekurangan tag HTML Khusus sedini mungkin dan berhenti membuat ilusi tentang kemungkinan tak berujung dari Google Pengelola Tag untuk menambahkan skrip. Melainkan, berpikir secara rumit - tentang organisasi, tentang situs secara keseluruhan dan tentang konteks lingkungan di mana GTM bekerja - sebelum membuat keputusan yang berisiko.Namun, ada aplikasi untuk HTML Kustom hari ini. Membuat pendengar klik menggunakan tag HTML Khusus (document.addEventListener ()) mungkin menjadi lebih menguntungkan daripada menjalankan beberapa jenis kode khusus menggunakan pemicu GTM.
Ini karena pemicu klik akan menjalankan tag berulang-ulang (menyuntikkannya lagi dan lagi) setiap kali diaktifkan. Jika Anda membuat pendengar klik dalam tag HTML Khusus dan memproses tugas berulang dengannya, maka Anda akan menghindari kebingungan selama implementasi.Saya juga dengan penuh semangat menjamin kenyamanan HTML Khusus dalam mendukung hipotesis. Anda dapat dengan cepat mencoba desain atau fungsionalitas baru dengan memposting perubahan pada sampel pengunjung tertentu. Jika hasilnya memuaskan, dimungkinkan untuk mengusulkan perubahan ini untuk dimasukkan dalam kode utama situs.Namun, saya berharap bahwa template khusus suatu hari akan menggantikan tag HTML Kustom.Sebagai kata perpisahan bagi mereka yang menggunakan tag HTML Khusus, terutama bagi mereka yang ingin menambahkan kode yang ditemukan di jaringan, pepatah Rusia yang terkenal sangat berguna:Percaya, tetapi verifikasi.Jika Anda tidak tahu apa yang dilakukan kode, tanyakan kepada pengembang web yang familier.