Cara Menambah Kod Pengurus Teg Google dalam Tapak Web React-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Cara Menambah Kod Pengurus Teg Google dalam Tapak Web React

Aug 09, 2024 am 02:07 AM

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 <skrip> teg yang terdapat dalam <head> HTML anda.
Pilihan <noskrip> teg yang pergi serta-merta selepas pembukaan <body> tag.

2. Pasang GTM dalam Apl React Anda

Pilihan 1: Menambah Kod GTM Secara Manual

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

   &lt;!DOCTYPE html&gt;
   &lt;html lang="en"&gt;
   &lt;head&gt;
       &lt;meta charset="UTF-8"&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
       &lt;title&gt;React App&lt;/title&gt;
       &lt;!-- Google Tag Manager --&gt;
       &lt;script&gt;
           (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'?'&amp;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');
       &lt;/script&gt;
       &lt;!-- End Google Tag Manager --&gt;
   &lt;/head&gt;
   &lt;body&gt;
       &lt;noscript&gt;&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
       height="0" width="0" style="display:none;visibility:hidden"&gt;&lt;/iframe&gt;&lt;/noscript&gt;
       &lt;div id="root"&gt;&lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;

Salin selepas log masuk

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

Masukkan <noskrip> Tag Selepas <badan> Tag: Letakkan <noskrip> tanda nama sejurus selepas pembukaan <body> 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

Salin selepas log masuk

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 = () =&gt; {
       useEffect(() =&gt; {
           const tagManagerArgs = {
               gtmId: 'GTM-XXXXXX'
           };
           TagManager.initialize(tagManagerArgs);
       }, []);

       return (
           &lt;div className="App"&gt;
               {/* Your app components */}
           &lt;/div&gt;
       );
   };

   export default App;

Salin selepas log masuk

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!

Kenyataan Laman Web ini

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