วิธีทำ

ฮาวทูโฮม

เมนู

ไอคอนบาร์ ไอคอนเมนู หีบเพลง แท็บ แท็บแนวตั้ง ส่วนหัวของแท็บ แท็บเต็มหน้า วางเมาส์เหนือแท็บ การนำทางยอดนิยม ตอบสนอง Topnav แถบนำทางพร้อมไอคอน ค้นหาเมนู แถบค้นหา แถบด้านข้างคงที่ การนำทางหน้า แถบด้านข้างที่ตอบสนอง การนำทางแบบเต็มหน้าจอ เมนูออฟแคนวาส เลื่อนปุ่ม Sidenav แถบด้านข้างพร้อมไอคอน เมนูเลื่อนแนวนอน เมนูแนวตั้ง การนำทางด้านล่าง การนำทางด้านล่างที่ตอบสนอง ลิงค์นำทางด้านล่าง ลิงค์เมนูชิดขวา ลิงค์เมนูตรงกลาง ลิงค์เมนูความกว้างเท่ากัน เมนูคงที่ แถบเลื่อนลงบน Scroll ซ่อนแถบนำทางบน Scroll ย่อแถบนำทางบน Scroll แถบนำทางติดหนึบ แถบนำทางบนรูปภาพ วางเมาส์เหนือรายการแบบเลื่อนลง คลิกเมนูแบบเลื่อนลง Cascading Dropdown ดรอปดาวน์ใน Topnav เมนูแบบเลื่อนลงใน Sidenav ตอบสนอง Navbar ดรอปดาวน์ เมนูการนำทางย่อย Dropup เมนูเมก้า เมนูมือถือ เมนูผ้าม่าน ยุบแถบด้านข้าง แผงข้างที่ยุบ การแบ่งหน้า เกล็ดขนมปัง กลุ่มปุ่ม กลุ่มปุ่มแนวตั้ง Sticky Social Bar การนำทางยา ส่วนหัวที่ตอบสนอง

รูปภาพ

สไลด์โชว์ แกลเลอรี่ภาพสไลด์ รูปภาพโมดอล ไลท์บ็อกซ์ ตารางภาพที่ตอบสนอง ตารางรูปภาพ แท็บแกลลอรี่ ภาพซ้อนทับจาง สไลด์ภาพซ้อนทับ ซูมภาพซ้อนทับ ชื่อภาพซ้อนทับ ไอคอนภาพซ้อนทับ เอฟเฟกต์ภาพ ภาพขาวดำ ข้อความรูปภาพ บล็อกข้อความรูปภาพ ข้อความรูปภาพโปร่งใส ภาพเต็มหน้า แบบฟอร์มบนรูปภาพ ภาพฮีโร่ ภาพพื้นหลังเบลอ เปลี่ยน Bg บน Scroll ภาพเคียงข้างกัน รูปภาพโค้งมน รูปภาพอวาตาร์ รูปภาพที่ตอบสนอง เซ็นเตอร์ อิมเมจ รูปขนาดย่อ ชายแดนรอบรูปภาพ พบกับทีม ภาพติดหนึบ พลิกภาพ เขย่าภาพ Portfolio Gallery ผลงานที่มีการกรอง ซูมภาพ แว่นขยายภาพ ตัวเลื่อนเปรียบเทียบรูปภาพ Favicon

ปุ่ม

ปุ่มแจ้งเตือน ปุ่มเค้าร่าง ปุ่มแยก ปุ่มเคลื่อนไหว ปุ่มซีดจาง ปุ่มบนรูปภาพ ปุ่มโซเชียลมีเดีย อ่านเพิ่มเติม อ่านน้อยลง กำลังโหลดปุ่ม ดาวน์โหลดปุ่ม ปุ่มยา ปุ่มแจ้งเตือน ปุ่มไอคอน ปุ่มถัดไป/ก่อนหน้า ปุ่มเพิ่มเติมในการนำทาง บล็อกปุ่ม ปุ่มข้อความ ปุ่มกลม เลื่อนไปที่ปุ่มด้านบน

แบบฟอร์ม

แบบฟอร์มเข้าสู่ระบบ แบบฟอร์มลงทะเบียน แบบฟอร์มการชำระเงิน แบบฟอร์มการติดต่อ แบบฟอร์มเข้าสู่ระบบโซเชียล แบบฟอร์มลงทะเบียน แบบฟอร์มที่มีไอคอน จดหมายข่าว แบบฟอร์มซ้อน แบบฟอร์มตอบสนอง แบบฟอร์มป๊อปอัป แบบฟอร์มอินไลน์ ล้างช่องป้อนข้อมูล ซ่อนลูกศรตัวเลข คัดลอกข้อความไปยังคลิปบอร์ด ค้นหาเคลื่อนไหว ปุ่มค้นหา ค้นหาแบบเต็มหน้าจอ ช่องป้อนข้อมูลใน Navbar แบบฟอร์มเข้าสู่ระบบใน Navbar กำหนดเอง ช่องทำเครื่องหมาย/วิทยุ เลือกเอง สวิตช์สลับ เลือกช่องทำเครื่องหมาย ตรวจจับ Caps Lock ปุ่มทริกเกอร์บน Enter การตรวจสอบรหัสผ่าน สลับการเปิดเผยรหัสผ่าน แบบฟอร์มหลายขั้นตอน เติมข้อความอัตโนมัติ ปิดการเติมข้อความอัตโนมัติ ปิดการตรวจตัวสะกด ปุ่มอัพโหลดไฟล์ การตรวจสอบความถูกต้องของอินพุตที่ว่างเปล่า

ตัวกรอง

รายการตัวกรอง ตารางตัวกรอง องค์ประกอบตัวกรอง กรองรายการแบบเลื่อนลง เรียงรายการ ตารางการสะกด

โต๊ะ

โต๊ะลายม้าลาย โต๊ะกลาง ตารางเต็มความกว้าง โต๊ะข้างเคียง ตารางตอบสนอง ตารางเปรียบเทียบ

มากกว่า

วิดีโอแบบเต็มหน้าจอ กล่องโมดอล ลบ Modal เส้นเวลา ตัวบ่งชี้การเลื่อน แถบความคืบหน้า แถบทักษะ ตัวเลื่อนช่วง เคล็ดลับเครื่องมือ แสดงองค์ประกอบ Hover ป๊อปอัพ พับได้ ปฏิทิน HTML รวม รายการสิ่งที่ต้องทำ รถตัก ระดับดาว คะแนนของผู้ใช้ เอฟเฟกต์ภาพซ้อนทับ ติดต่อชิป การ์ด พลิกการ์ด การ์ดโปรไฟล์ บัตรผลิตภัณฑ์ การแจ้งเตือน โทรออก หมายเหตุ ป้าย แวดวง สไตล์ HR คูปอง รายการกลุ่ม รายการที่ไม่มีสัญลักษณ์แสดงหัวข้อย่อย ข้อความตอบสนอง ข้อความคัตเอาท์ ข้อความเรืองแสง แก้ไขส่วนท้าย องค์ประกอบเหนียว ความสูงเท่ากัน Clearfix ลอยตัวตอบสนอง สแน็คบาร์ หน้าต่างเต็มหน้าจอ วาดเลื่อน เลื่อนเรียบ เลื่อน Bg ไล่ระดับ ติดหัว ย่อส่วนหัวบน Scroll ตารางราคา พารัลแลกซ์ อัตราส่วนภาพ Iframes ที่ตอบสนอง สลับชอบ/ไม่ชอบ สลับซ่อน/แสดง สลับโหมดมืด สลับข้อความ สลับคลาส เพิ่มคลาส ลบคลาส คลาสที่ใช้งาน วิวต้นไม้ ลบทรัพย์สิน การตรวจจับออฟไลน์ ค้นหาองค์ประกอบที่ซ่อนอยู่ เปลี่ยนเส้นทางหน้าเว็บ ซูมโฮเวอร์ พลิกกล่อง ตั้งศูนย์ในแนวตั้ง ปุ่มกลางใน DIV การเปลี่ยนแปลงเมื่อวางเมาส์เหนือ ลูกศร รูปร่าง ลิ้งค์ดาวน์โหลด องค์ประกอบความสูงเต็ม หน้าต่างเบราว์เซอร์ แถบเลื่อนแบบกำหนดเอง ซ่อนแถบเลื่อน แสดง/บังคับแถบเลื่อน ดูอุปกรณ์ เส้นขอบที่แก้ไขได้ ตัวยึดสี สีการเลือกข้อความ สีกระสุน เส้นแนวตั้ง วงเวียน ไอคอนเคลื่อนไหว นาฬิกาจับเวลาถอยหลัง เครื่องพิมพ์ดีด เร็วๆ นี้ เพจ ข้อความแชท หน้าต่างแชทแบบป๊อปอัป หน้าจอแยก ข้อความรับรอง ส่วนเคาน์เตอร์ สไลด์โชว์คำคม รายการที่ปิดได้ เบรกพอยต์อุปกรณ์ทั่วไป องค์ประกอบ HTML ที่ลากได้ JS Media Queries ปากกาเน้นข้อความ JS Animations JS String Length JS การยกกำลัง JS พารามิเตอร์เริ่มต้น รับ URL ปัจจุบัน รับขนาดหน้าจอปัจจุบัน รับองค์ประกอบ Iframe

เว็บไซต์

สร้างเว็บไซต์ฟรี ทำเว็บไซต์ สร้างเว็บไซต์แบบคงที่ สร้างเว็บไซต์ (W3.CSS) สร้างเว็บไซต์ (BS3) สร้างเว็บไซต์ (BS4) สร้างเว็บไซต์ (BS5) สร้างและดูเว็บไซต์ สร้างเว็บไซต์ลิงค์ทรี สร้างผลงาน สร้างเรซูเม่ ทำเว็บไซต์ร้านอาหาร ทำเว็บไซต์ธุรกิจ ทำเว็บบุ๊ก เว็บไซต์ศูนย์ ส่วนติดต่อ เกี่ยวกับเพจ หัวโต ตัวอย่างเว็บไซต์

กริด

เค้าโครง 2 คอลัมน์ เค้าโครง 3 คอลัมน์ เค้าโครง 4 คอลัมน์ ขยายกริด แสดงรายการมุมมองกริด เค้าโครงคอลัมน์แบบผสม การ์ดคอลัมน์ เค้าโครงซิกแซก เค้าโครงบล็อก

Google

Google Charts Google Fonts การจับคู่แบบอักษรของ Google Google ตั้งค่า Analytics

ตัวแปลงสัญญาณ

แปลงน้ำหนัก แปลงอุณหภูมิ แปลงความยาว แปลงความเร็ว

บล็อก

รับงานนักพัฒนา มาเป็น Front-End Dev

วิธีการตั้งค่า Google Analytics

Google Analytics ใช้ในการดูและทำความเข้าใจการเข้าชมเว็บ

ใช้งานได้ฟรีและใช้งานง่าย

คุณสามารถปรับแต่งได้สำหรับกรณีการใช้งานต่างๆ

มันทำงานออกจากกล่อง

มันรวดเร็วในการตั้งค่า รับข้อมูลเชิงลึกของคุณวันนี้!

สร้างเว็บไซต์ฟรีของฉัน ❯

ข้ามการอ่านเกี่ยวกับ Google Analytics พาฉันไปที่ขั้นตอนแรกโดยตรง ไปที่ขั้นตอนแรก

Google Analytics คืออะไร

Google Analytics เป็นโซลูชันการวิเคราะห์เว็บ

ได้รับการพัฒนาและสนับสนุนโดย Google

เวอร์ชันใหม่ล่าสุดเรียกว่า Google Analytics 4

สามารถใช้เพื่อดูข้อมูล เช่น ผู้ชม การดูหน้าเว็บ เซสชันและข้อมูลประชากร และเหตุการณ์

เหตุใดจึงเปิดใช้ Google Analytics

ทำความเข้าใจการเข้าชมเว็บของคุณเพื่อการตัดสินใจที่ดีขึ้น

ทำความเข้าใจและปรับปรุงกระบวนการขาย

เรียนรู้จากการทดลอง (เช่น การทดสอบ a/b)

Google มีโซลูชันอื่นที่เรียกว่า Google Optimize โซลูชันนี้จัดทำขึ้นสำหรับการทดสอบ


Google Analytics สำหรับใคร?

Google Analytics มีประโยชน์สำหรับทุกคนที่มีเว็บไซต์

มันให้ข้อมูลเกี่ยวกับผู้ที่ใช้เว็บไซต์ของคุณและวิธีที่พวกเขาโต้ตอบกับมัน

นอกจากนี้อินเทอร์เฟซยังเข้าใจง่าย

คุณไม่จำเป็นต้องมีพื้นฐานการวิเคราะห์เพื่อใช้และสำรวจบริการ


วิธีตั้งค่า Google Analytics ทีละขั้นตอน

Google Analytics สามารถตั้งค่าได้สองวิธีคือ แท็กเว็บไซต์สากล (gtag.js)หรือGoogle Tag Manager

วิธีที่ง่ายที่สุดคือการใช้แท็กเว็บไซต์ทั่วโลก

บทแนะนำนี้จะใช้วิธีแท็กเว็บไซต์ทั่วโลก


การเตรียมการ

ตัดสินใจว่าจะใช้ตัวแก้ไขโค้ดใดและตั้งค่าสภาพแวดล้อมของคุณ

W3Schools ได้สร้างโปรแกรมแก้ไขโค้ดที่ใช้งานง่าย ชื่อW3Schools Spaces ลงทะเบียนและเริ่มต้นในไม่กี่คลิก

เริ่มฟรี ❯

สร้าง ไฟล์ index.html ของคุณ เพื่อให้คุณพร้อมที่จะป้อนรหัส

การตั้งค่าทั้งหมด ไปกันเถอะ!


ตั้งค่า Google Analytics: แท็กเว็บไซต์ทั่วโลก


ขั้นตอนที่ 1: สร้างบัญชี Google Analytics

ไปที่ Analytics: สร้างบัญชีหรือลงชื่อเข้าใช้ Analytics

ลิงก์ในย่อหน้าด้านบนจะนำคุณไปยังหน้า Landing Page ของ Google Analytics

คลิกปุ่ม "เริ่มฟรี"

หน้า Landing Page

ขั้นตอนที่ 2: เข้าสู่หน้าต้อนรับ

หลังจากสร้างบัญชีหรือลงชื่อเข้าใช้ คุณจะได้รับการต้อนรับสู่โซลูชัน

กดปุ่ม "เริ่มการวัด" เพื่อดำเนินการต่อ

ยินดีต้อนรับเพจ

ขั้นตอนที่ 3: การตั้งค่าบัญชี

คุณมีสองการตัดสินใจที่จะทำที่นี่

  1. ป้อนชื่อบัญชีของคุณ
  2. ตัดสินใจว่าคุณต้องการแชร์ข้อมูลใด
  3. คลิกปุ่ม "ถัดไป"

หนึ่งบัญชีสามารถมีรหัสติดตามได้มากกว่าหนึ่งรหัส คุณสามารถติดตามมากกว่าหนึ่งเว็บไซต์ด้วยบัญชี

ภาพรวมการตั้งค่าบัญชี

ขั้นตอนที่ 4: การตั้งค่าคุณสมบัติ

คุณสมบัติคือบริการที่คุณวัด เช่น เว็บไซต์ แอปพลิเคชัน โครงสร้างลิงก์ ฯลฯ

  1. ป้อนชื่อคุณสมบัติ
  2. ป้อนเขตเวลาของคุณ
  3. ป้อนสกุลเงินที่คุณใช้
  4. คลิกปุ่ม "ถัดไป"
ภาพรวมการตั้งค่าคุณสมบัติ

ขั้นตอนที่ 5: เพิ่มข้อมูลทางธุรกิจ

Analytics ใช้ข้อมูลเพื่อปรับแต่งประสบการณ์ของคุณ

  1. เลือกหมวดหมู่อุตสาหกรรมของคุณ
  2. เลือกขนาดธุรกิจ
  3. Tick the boxes for how you are planning to use Analytics.
  4. Click the "Create" button to proceed.
รายละเอียดข้อมูลธุรกิจ

Step 6: Terms of Service Agreement

Read and understand the terms of service.

Tick the GDPR box and click the "I accept" button if you agree.

ภาพรวมข้อกำหนดและเงื่อนไข

Step 7: Email subscriptions

  1. Tick or uncheck all boxes.
  2. Click the "Save" button to continue.
ภาพรวมการสื่อสารทางอีเมล

Step 8: Select platform

Chose the platform where you are collecting data.

Then, click the relevant platform to continue.

We are continuing with "Web" as the example in this tutorial.

เลือกภาพรวมแพลตฟอร์ม

Step 9: Data stream setup

Enter data stream details.

  1. The URL to your site.
  2. The name that you want to give the stream.
  3. Decide if you are to enable enhanced measurement or not.
  4. Click on the "Create stream" button to continue.
  5. The enhanced measurement can give the data more context. Improving your understanding of the traffic.

    ภาพรวมการตั้งค่าสตรีมข้อมูล

    Step 10: Web stream overview

    Here you can see a detailed overview of the web stream.

    ภาพรวมรายละเอียดการสตรีมเว็บ

    Here are the key takeaways from the overview.

    1. Stream URL.

    The Stream URL is the link to the connected site.

    URL ของสตรีม

    2. Measurement ID

    The Measurement ID is the identifier for your data stream.

    It has a format of G-XXXXXXX.

    รหัสการวัด

    Google Analytics 4 uses Measurement ID. Older versions use Tracking ID. You can not have both.

    3. Tagging instructions

    Decide to use Global site tag (gtag.js) or Tag manager.

    This tutorial will use the Global site tag.

    Installing the Global site tag is the easiest and quickest way of getting it up and running.

    คำแนะนำในการติดแท็ก

    Step 11: Global site tag (gtag.js)

    Click the "Global site tag (gtag.js)" row.

    แท็กที่ติดทั่วเว็บไซต์

    Here you can see a code snippet.

    The code snippet is a script to allow Google to measure data on your site.

    You can see the Measurement ID in the second last line in the code snippet.

    The code snippet

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DNJN1PF3CS"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXX');
    </script>

    Step 12: Enter the code snippet

    Copy the code snippet.

    Make sure to include your Measurement ID.

    Locate the <head> tag in your HTML.

    Paste the code snippet just below the <head> tag.

    Save and publish the code.

    เพิ่มข้อมูลโค้ด

    We used W3Schools Spaces in this example.


    Step 13: Test that it works

    Ensure that you have successfully saved and published the code snippet with the correct Measurement ID.

    Open the URL for the site you have connected to the data stream.

    Click on "Real time" on the menu to the left.

    Confirm that you see yourself as an active user.

    Congrats. You have successfully enabled Google Analytics for your site!

    Analytics dashboard

    Explore Google Analytics

    Recommended related topics are Tag manager and Events

    Spend time in the service to learn about your user activity, commerce, demographics, device, and referrals.


    Tip: Ever heard of W3Schools Spaces? It is a personal space where you can make a website from scratch or use a template and host it for free.

    It has everything you need in the browser.

    Get started in a few clicks.

    Start now for free ❯

    * no credit card required