Mengintegrasikan skrip pihak ketiga ke dalam Single Page Application (SPA) seperti React memerlukan penanganan DOM yang cermat. Anda tidak bisa begitu saja menempelkan tag skrip ke dalam file HTML jika Anda ingin kontrol dinamis. Panduan ini mendemonstrasikan cara membuat komponen khusus Komponen Injector—cara yang modular, bersih, dan ramah React untuk memuat mesin MultiLipi.
Metode ini memastikan tidak ada pemblokiran utas utama, injeksi tag SEO yang optimal, dan pembersihan yang tepat saat unmounting.
Prasyarat
Sebelum melanjutkan, pastikan Anda memiliki hal berikut dari Dasbor MultiLipi Anda:
Kunci API Proyek: Pengenal unik Anda (Ditemukan di Pengaturan).
Bahasa Target: Daftar kode ISO yang diaktifkan untuk proyek Anda (misalnya, 'id', 'es', 'fr').
Domain: Domain produksi Anda (misalnya, yoursite.com).
Langkah 1: Buat Komponen Injector
Membangun jembatan.
Kita akan membuat komponen khusus yang satu-satunya tugasnya adalah mengelola injeksi tag SEO dan skrip terjemahan ke dalam dari dokumen Anda.
Tindakan: Buat file bernama multilipi.tsx (atau .js) di src/ folder dan tempel kode di bawah ini.
// multilipi.tsx
import { useEffect } from "react";
const LANGUAGES = ["hi", "ar"] as const; // Replace with your languages
const DOMAIN = "example.com"; // Replace with your actual domain
const MULTILIPI_KEY = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"; // Replace with your actual key
export default function AddScriptToHead() {
useEffect(() => {
const head = document.head;
const added: HTMLElement[] = [];
const add = <T extends HTMLElement>(el: T) => {
head.appendChild(el);
added.push(el);
return el;
};
// Alternate hreflang links
LANGUAGES.forEach((lang) => {
const link = document.createElement("link");
link.rel = "alternate";
link.hreflang = lang;
link.href = `https://${lang}.${DOMAIN}/`;
add(link);
});
// DNS prefetch & preconnect
const dns = document.createElement("link");
dns.rel = "dns-prefetch";
dns.href = "//multilipiseo.multilipi.com";
add(dns);
const preconnect = document.createElement("link");
preconnect.rel = "preconnect";
preconnect.href = "https://multilipiseo.multilipi.com";
preconnect.crossOrigin = "anonymous";
add(preconnect);
// Add MultiLipi translation script
const script = document.createElement("script");
script.src = "https://script-cdn.multilipi.com/static/JS/page_translations.js";
script.crossOrigin = "anonymous";
script.dataset.posX = "50";
script.dataset.posY = "50";
script.setAttribute("multilipi-key", MULTILIPI_KEY);
script.setAttribute("mode", "auto");
add(script);
// Cleanup on component unmount
return () => {
added.forEach((el) => el.parentNode?.removeChild(el));
};
}, []);
return null;
}Analisis Kode Mendalam: Mengapa ini berhasil
useEffect Hook: Ini memastikan kode berjalan hanya setelah komponen terpasang, mencegah pemblokiran selama fase hidrasi awal.
Otomatisasi SEO (Hreflang): Kode mengulang array BAHASA Anda dan secara dinamis menyuntikkan tag. Ini sangat penting untuk memberi tahu Google bahwa hi.example.com adalah versi Hindi dari situs Anda.
Performa (Preconnect): Si dns-prefetch dan prakoneksi baris memberitahu browser untuk menyelesaikan alamat IP server MultiLipi sebelum skrip diminta. Ini secara signifikan mengurangi waktu yang dibutuhkan agar widget terjemahan muncul.
Fungsi Pembersihan (return () => ...): Di React, komponen dapat dirender ulang. Logika ini melacak setiap elemen yang kita tambahkan (added.push(el)) dan menghapusnya jika komponen tidak terpasang. Ini mencegah tag skrip duplikat dan kebocoran memori.
Langkah 2: Inisialisasi di Aplikasi Root
Mengaktifkan lapisan.
Sekarang setelah logikanya dienkapsulasi, kita perlu menempatkannya di level tertinggi pohon aplikasi Anda, biasanya Aplikasi.tsx atau App.js.
Tindakan: Impor dan pasang komponen.
// App.tsx
import AddScriptToHead from './multilipi'; // adjust the path as needed
function App() {
return (
<>
{/* Load the MultiLipi script */}
<AddScriptToHead />
{/* Rest of your App UI */}
</>
);
}
export default App;Mengapa menempatkannya di sini?
Cakupan Global: Penempatan
Non-Visual: Karena komponen mengembalikan null, itu tidak memengaruhi tata letak atau spasi UI Anda. Ia bekerja secara diam-diam di latar belakang.
Daftar Periksa Verifikasi
Cara mengonfirmasi integrasi yang berhasil.
Setelah Anda menyimpan dan menjalankan aplikasi React Anda (npm start atau yarn dev), lakukan pemeriksaan ini:
Pemeriksaan Visual: Apakah Anda melihat widget Pengalih Bahasa mengambang di posisi yang ditentukan oleh posX dan posY?
Pemeriksaan DOM: Buka Chrome DevTools (F12) → Tab Elemen → Perluas .
Pastikan Anda melihat Tags.
Verifikasi page_translations.js skrip ada di bagian bawah tag head.
Pemeriksaan Jaringan: Buka Tab Jaringan dan filter berdasarkan "JS". Pastikan page_translations.js sedang dimuat dengan status 200 OK.
Opsi Konfigurasi Tambahan
Dalam kode yang disediakan, Anda akan melihat script.dataset properti. Anda dapat mengubah nilai-nilai ini untuk menyesuaikan perilaku:
script.dataset.posX / posY: Sesuaikan angka-angka ini (0-100) untuk memindahkan posisi default widget mengambang di layar.
script.setAttribute("mode", "auto"):
"auto": Secara otomatis mencoba menerjemahkan berdasarkan bahasa peramban.
"manual": Menunggu interaksi pengguna sebelum menerjemahkan.