1 of 73

陳擎文

GA Operating Instructions(1)

2 of 73

Unit Outline

  • 1. How GA works�2. The overall structure of the GA account�3. Three jobs to operate a GA account�4. Apply for an account on the GA platform and create resources�5. How does our website hw4 connect to GA4?�6. Check if the GA4 code is installed successfully?�7. Connect our website hw3 to GA4

​

​

3 of 73

1. How GA works

4 of 73

1. How GA works

  • ◉ Google Analytics code analysis primarily uses tracking technology through page tags to collect data.
  • ◉ We can apply it to specific pages or every page, so that when users visit a webpage, their browsing information is captured by Google Analytics' tracking code.
  • This tracking code monitors the actions taken by visitors on each page and sends the data to GA's database, which is then presented in various reports within GA.

5 of 73

1. How GA works

  • ◉ By placing the Google Analytics tracking code in the <HEAD> of the webpage, it acts like a "monitor," tracking visitors' behavior on the site.

6 of 73

1. How GA works

7 of 73

☎ Important Concepts:

�2. The overall structure of the GA account

8 of 73

2. GA's Account Structure�GA has a new version, an old version

  • old edition GA: 通用版GA, Universal Analytics�new edition GA: GA4 , Google Analytics 4

9 of 73

2. GA 的帳號架構�For now, just look at the new version of GA4

  • [Account]: For a company, it is to apply for 1 GA account�[Resources]: A company has many brands, and 3 brands will establish 3 resources (3 different websites)�[Data Streaming]: 1 brand can set up to 3 data streams: website, IOS APP, Android APP

​

10 of 73

☎ Important Concepts:

�3. Operate the GA account�Three jobs

11 of 73

Three jobs to operate a GA account

12 of 73

Three jobs to operate a GA account

  • Task 1: Create a brand website, essentially establishing a resource.
  • Task 2: Set up the web traffic sources related to the brand website (website URL, App).
  • Task 3: Configure related settings (e.g., retain web data for 3 months…).

13 of 73

4. Go to the GA platform�Apply for an account and build resources

14 of 73

(1) To apply for a GA account, Method 1:�新手第1次，從【開始評估】

15 of 73

(1) To apply for a GA account, Method 2:�Old students will be added in the future➜齒輪【管理】

  • 1. Bottom left【管理】➜【建立】➜帳戶

16 of 73

① Applying for GA (Google Analytics) in 5 steps:Create an account.

  • Account: Individual's name（or company name)

17 of 73

① Applying for GA in 5 steps: �Step 2: Create a property.

  • Property: Brand Name (or Website Name)
  • Examples:
  • Company: Uni-President統一
  • Brands:
  • - 7-Eleven
  • - Uni Orange Drink
  • - Dream Mall

​

  • Company: HTC
  • Brands:
  • - HTC
  • - VIVE (Virtual Reality Equipment)

18 of 73

資源名稱：It should be the brand name of the company�課程實作：web4

19 of 73

Step 3: Business Details

20 of 73

Step 4: Business Goals

  • Set your goals with GA4�If you want to select a report�Everything else is included

21 of 73

Complete 5 steps

  • GA4 allows up to 【3 connections】 to brand properties for integration.
    • 網站，Android App， IOS APP

22 of 73

5. Our website hw4�How to connect to GA4

23 of 73

5. How our website is linked to GA4

  • Step 1: Example website 4 has been completed and uploaded to Github.
    • The URL of the website is already known：https://ccwntut.github.io/hw4/

​

24 of 73

5. How our website is linked to GA4

  • Step 2. Go to the GA4 platform website，
  • 【齒輪管理】
  • ➜【帳戶】
  • ➜【資源：web4】
  • ➜資料串流

​

25 of 73

資料串流➜選擇【網站】

26 of 73

Enter the URL: Which domain should I use?

  • Note: Which of the following is put here？
    • Directory domains：ccwntut.github.io
    • or a subdirectory domain： ccwntut.github.io/hw4
    • Which one is correct?？
  • Note: Do not put the last 1 letter【/】
    • Wrong way to write it： ccwntut.github.io/hw4/

​

  • 串流名稱：web4

27 of 73

Enter the URL: Which domain should I use?

  • URL set to:ccwntut.github.io/hw4
    • GA4 can only track the traffic under the **hw4** directory
    • and cannot track other parts of your website.
  • URL set to:ccwntut.github.io 
    • GA4 can track all traffic to your entire website

28 of 73

Establish a data stream�建立資料串流�ccwntut.github.io/hw4

29 of 73

Step 3: Copy the Google code into each page<head>

30 of 73

Open the **hw4** pages: index/a1/a2/a3/a4, and paste the GA4 code.

31 of 73

Open the **hw4** pages: index/a1/a2/a3/a4, and paste the GA4 code.

32 of 73

Open the **hw4** pages: index/a1/a2/a3/a4, and paste the GA4 code.

  • note：
    • 1 web page, only 1 GA4 code can be placed,�If you place 2 of them, an error will occur

33 of 73

重新上傳hw4的index/a1/a2/a3/a4網頁到Github

34 of 73

6. Check if the GA4 code is installed successfully?

35 of 73

6. Check if the GA4 code is installed successfully?

  • Method 1: Use GA4 Real-Time Report View
  • Method 2: Use the Google Tag Assistant website to do a test check

36 of 73

Method 1: Use GA4 Real-Time Report View

方法2：使用Google Tag Assistant網站來做測試檢查

37 of 73

Method 1: Use GA4 Real-Time Report View

  • Step 1: Go to the GA4 platform first：
    • 【左上角Menu選單】 ➜【報表】 ➜【即時報表】➜目前30分鐘內0人

38 of 73

Method 1: Use GA4 Real-Time Report View

  • Step 2: Go to the website in Example 4：
    • ccwntut.github.io/hw4
    • Do the "Web Browsing" action
    • Button click action
    • In the early days of GA, after a web browsing/click, it took 5 minutes for GA4 to display the data

39 of 73

Step 3: Back to the GA4 platform:【左上角Menu選單】 ➜【報表】 ➜【即時報表】

40 of 73

Step 3: Back to the GA4 platform:【左上角Menu選單】 ➜【報表】 ➜【即時報表】

  • The number of active users in the last 30 minutes: 1�Number of active users in the last 5 minutes: 1
  • Users are segmented by: Source #1 of the initial user attraction

​

41 of 73

Step 3: Go back to the GA4 platform：�【左上角Menu選單】 ➜【報表】 ➜【即時報表】

42 of 73

方法1：使用GA4 即時報表檢視

Method 2: Use the Google Tag Assistant website to do a test check

43 of 73

Method 2: Use the Google Tag Assistant website to do a test check

  • 1. Go to the Google search engine and type:
    • Google Tag Assistant
    • https://tagassistant.google.com/
    • Add Domain

​

44 of 73

Method 2: Use the Google Tag Assistant website to do a test check

  • Add Domain
    • https://ccwntut.github.io/hw4

​

45 of 73

Domain 🡪 Google Tag Assistant 已經連線

46 of 73

Side-by-side 2 web page comparison: scroll/click on the hw4 web page�➜ See the instant reaction of Google Tag Assistant

47 of 73

Scroll through the web page a1.html�➜Google Tag Assistant有Scrol事件

48 of 73

點按超連結到a2.html➜Google Tag�Assistant有link click，windows load事件

49 of 73

7. Place our website on hw3�Concatenation to GA4

50 of 73

8. to the GA 4 platform�Select your account to build resources in web3

51 of 73

齒輪【管理】

  • 1.左下角【管理】➜【建立】➜資源

52 of 73

Build new resources：web3

53 of 73

Direct configuration【資料串流】🡪 網站

54 of 73

55 of 73

establish資料串流�ccwntut.github.io/hw3

  • 串流名稱：web3

56 of 73

Copy the code to hw3的index/a1/a2/a3/a4

57 of 73

Copy the code to hw3的index/a1/a2/a3/a4

58 of 73

Re-uploaded hw3的index/a1/a2/a3/a4網頁到Github

59 of 73

Back to the GA4 platform: Is the test already installed successfully?

  • The Google tag is correctly detected on your site

60 of 73

61 of 73

6. Check if the GA4 code is installed successfully?

  • Method 1: Use GA4 Real-Time Report View
  • Method 2: Use the Google Tag Assistant website to do a test check

62 of 73

Method 1: Use GA4 Real-Time Report View

方法2：使用Google Tag Assistant網站來做測試檢查

63 of 73

Method 1: Use GA4 Real-Time Report View

  • Step 1: Go to the GA4 platform first：
    • 【左上角Menu選單】 ➜【報表】 ➜【即時報表】➜目前30分鐘內0人

64 of 73

Method 1: Use GA4 Real-Time Report View

  • Step 2: Go to the website in Example 4：
    • ccwntut.github.io/hw3
    • 做【網頁瀏覽】動作
    • 【按鈕點擊】動作
    • 早期的GA，網頁瀏覽/點擊後，要等5分鐘，GA4才會顯示數據

65 of 73

Step 3: Back to the GA4 platform:�【左上角Menu選單】 ➜【報表】 ➜【即時報表】

66 of 73

方法1：使用GA4 即時報表檢視

Method 2: Use the Google Tag Assistant website to do a test check

67 of 73

Method 2: Use the Google Tag Assistant website to do a test check

  • 1. Go to the Google search engine and type:
  • Google Tag Assistant
    • Add Domain

​

68 of 73

Method 2: Use the Google Tag Assistant website to do a test check

  • Add Domain
    • https://ccwntut.github.io/hw3

​

69 of 73

Domain 🡪 Google Tag Assistant 已經連線

  • Tag Asistant不可以【關閉/或Finish】

70 of 73

Side-by-side 2 web page comparison: scroll/click on the hw4 web page�➜ See the instant reaction of Google Tag Assistant

71 of 73

Scroll through the web page a1.html�➜Google Tag Assistant有Scrol事件

72 of 73

9. Conclusion

73 of 73

Conclusion: GA website to apply for an account, the steps to create a resource

  • (1) Apply for Google Analytic�(2) Embed the tracking code on the web page in such a way as you set it up�(3) Reports that interpret Google Analytic trackers (related statistics)