Rumah > Artikel > hujung hadapan web > Cara Menambah Kod Pengurus Teg Google dalam Tapak Web React

Cara Menambah Kod Pengurus Teg Google dalam Tapak Web React

WBOYasal: 2024-08-09 02:07:02730semak imbas

How To Add Google Tag Manager Code in a React Website

Menambah Pengurus Teg Google (GTM) pada tapak web React melibatkan memasukkan skrip GTM ke dalam aplikasi anda. Begini cara anda boleh melakukannya:

1. Buat Akaun Pengurus Google Tag

Jika anda belum berbuat demikian, anda perlu membuat akaun Pengurus Google Tag dan menyediakan bekas untuk tapak web anda. Google akan memberikan anda dua keping kod:

Satu teg yang terdapat dalam HTML anda.
Pilihan teg yang pergi serta-merta selepas pembukaan tag.

2. Pasang GTM dalam Apl React Anda

Pilihan 1: Menambah Kod GTM Secara Manual

Masukkan Skrip GTM dalam Tag: Dalam apl React, fail public/index.html ialah tempat anda akan menambahkan skrip GTM.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>React App</title>
       <!-- Google Tag Manager -->
       <script>
           (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
           new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
           j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
           'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
           })(window,document,'script','dataLayer','GTM-XXXXXX');
       </script>
       <!-- End Google Tag Manager -->
   </head>
   <body>
       <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
       height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
       <div id="root"></div>
   </body>
   </html>

Ganti GTM-XXXXXX dengan ID bekas GTM anda yang sebenar.

Masukkan Tag Selepas Tag: Letakkan tanda nama sejurus selepas pembukaan tag seperti yang ditunjukkan di atas.

Pilihan 2: Menggunakan Pustaka React GTM

Anda juga boleh menggunakan perpustakaan React untuk memudahkan penyepaduan.

Pasang Pustaka GTM:

Gunakan npm atau benang untuk memasang modul-react-gtm:

   npm install react-gtm-module

Mulakan GTM dalam Apl Anda:

Dalam komponen React utama anda (mis., App.js), mulakan GTM seperti ini:

   import React, { useEffect } from 'react';
   import TagManager from 'react-gtm-module';

   const App = () => {
       useEffect(() => {
           const tagManagerArgs = {
               gtmId: 'GTM-XXXXXX'
           };
           TagManager.initialize(tagManagerArgs);
       }, []);

       return (
           <div className="App">
               {/* Your app components */}
           </div>
       );
   };

   export default App;

Sekali lagi, gantikan GTM-XXXXXX dengan ID bekas GTM anda yang sebenar.

3. Sahkan Pemasangan

Selepas menambahkan GTM pada apl React anda, terbitkan perubahan dan sahkan bahawa GTM berfungsi dengan menggunakan sambungan Chrome Google Tag Assistant atau dengan menyemak bahagian "Masa Nyata" dalam Google Analitis.

Atas ialah kandungan terperinci Cara Menambah Kod Pengurus Teg Google dalam Tapak Web React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

chrome html npm yarn if for using public JS this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Memahami async dan deferArtikel seterusnya：Memahami async dan defer

Artikel berkaitan

Lihat lagi