Mengintegrasikan skrip pihak ketiga ke dalam Aplikasi Halaman Tunggal (SPA) seperti React memerlukan penanganan DOM yang cermat. Anda tidak bisa begitu saja menempelkan tag skrip ke file HTML jika Anda ingin kontrol dinamis. Panduan ini menunjukkan cara membuat yang didedikasikan "Komponen Injektor"—cara yang modular, bersih, dan ramah React untuk memuat mesin MultiLipi.
Metode ini memastikan tidak ada pemblokiran thread 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, 'hi', 'es', 'fr').
Domain: Domain produksi Anda (misalnya, yoursite.com).
Langkah 1: Buat Komponen Injector
Membangun jembatan.
Kita akan membuat komponen khusus yang tugasnya hanya mengelola injeksi tag SEO dan skrip terjemahan ke dalam 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;
}Selami Kode: Mengapa ini berhasil
Hook useEffect: Ini memastikan kode berjalan hanya setelah komponen terpasang, mencegah pemblokiran selama fase hidrasi awal.
Otomatisasi SEO (Hreflang): Kode tersebut mengulang melalui array BAHASA Anda dan secara dinamis menyuntikkan tag. Ini sangat penting untuk memberi tahu Google bahwa hi.example.com adalah versi bahasa Hindi dari situs Anda.
Performa (Preconnect): Yang dns-prefetch dan preconnect baris menginstruksikan 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 di-render ulang. Logika ini melacak setiap elemen yang kita tambahkan (added.push(el)) dan menghapusnya jika komponen dilepas. Ini mencegah tag skrip duplikat dan kebocoran memori.
Langkah 2: Inisialisasi di Aplikasi Root
Mengaktifkan lapisan.
Sekarang setelah logika dienkapsulasi, kita perlu menempatkannya di tingkat tertinggi pohon aplikasi Anda, biasanya App.tsx or 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: Menempatkan
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 or 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 tag.
Verifikasi page_translations.js skrip ada di bagian bawah 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 browser.
"manual": Menunggu interaksi pengguna sebelum menerjemahkan.