【教學】如何用程式碼追蹤Vocus文章每日流量？第一版
不知道自己Vocus文章每日流量變化嗎? 我寫了一個程式碼來紀錄，第一版
本來今天下午是要空下來花時間來寫作，但是我決定來處理另一個困擾我已久的問題：
到底我的文章每天的流量是多少
其實方格子的數據統計的頁面寫的蠻不錯的，算是好用的，但是當你寫完一篇文章後，你總是會好奇我的文章流量到底隨著時間每天到底成長了多少，或是當你看著數據圖表的時候，你很想知道你的每日的總瀏覽量是來自於哪一篇文章。
當然我希望方格子的工程師們可以改進這個問題，但在這之前我決定寫個程式碼來處理，為了節省時間我也用ChatGPT輔助我。
下列是我的訴求：
- 我希望可以看到每一篇文章隨著時間的成長
- 我希望知道文章瀏覽量的來源
- 讓大家都可以使用，而且不管有沒有寫程式基礎都可以相對簡單的使用我的程式碼。
懶人包：你要怎麼讀這一篇長文章？
其實核心概念就是兩個步驟：
1.取得數據
一切來源都是資料，這個版本是要你自己複製html，詳細做法請參考章節，"請自己複製html"
2.執行程式碼
我弄了一個可以在自己電腦執行的版本，程式碼附在下面。
另外也想也讓沒有程式碼基礎，或是自己電腦沒有安裝相關套件或是python的人，也可以利用google雲端硬碟，直接在網路上執行colab來統計自己的資料。
執行後的結果會將資料紀錄成一個 csv檔案，讓你後續可以追蹤每一篇文章當時的流量
不用擔心，這個程式碼不會讓我，也不會讓其他格友得到你的流量數據，請安心使用。
希望讓大家可以用用看，也可以給我一些意見。或是也有人可以加入讓這個程式碼更好的行列。
怎麼得到當下的數據
這其實是一個最尷尬的問題，理想上我們會希望程式碼按下去之後他就自己登錄網站自己抓數據自己統計、自己繪圖、甚至自己寫一個互動網頁讓我將下載下來的資料可以用一個網頁直接拖拉。
其實這就是動態爬蟲們在做的事情，很多人會用 selenium跟 ChromeDriver來動態爬蟲。但是google已經不讓你用Selenium WebDriver來模擬人工登入流程，使用ChromeDrive來登入帳號密碼了，因為這有安全隱私問題。
這時候很多軟體工程師們一定會很不屑的說，你可以用 Oauth2.0來處理啊，用Google API不就好了，而且還可以寫......來處理這個問題。
我知道，我也做過，但對其他非工程師的格友來說太複雜了，而且我想要這個下午就弄完，也不想要有任何侵入是動作造成違反版規的嫌疑。如果有其他神人要開放程式碼來處理，我會非常感謝。
最土砲的，就是你自己複製 html。
好啦我知道很俗，原諒我嘛
請自己複製html
這是我目前想到線下版本或是colab版本都不會讓其他人取得資料的方式了，如果有更好的建議也可以提供。
數據可以從兩個地方來複製，一個是數據統計，一個是內容作品管理。
你可以隨時想到就去複製一下，你複製越多次當然你自己留下的資料就越細緻，執行後會將你執行當下的時間記下來並生成一個csv檔案
從數據統計
其實你也可以自己複製貼上表格，但是因為他的數據欄數比較多，你螢幕不夠大就複製不到，而且你還要自己重新命名歸檔，我覺得很累。
怎麼複製數據統計的html
到全部類型這邊按右鍵點擊 "檢查"，然後將html從最上面整個複製下來，複製下來的方式就是按右鍵到"copy"裡面選"copy element"，存成一個.html檔案，如果你要用我後面的程式碼的話建議存成一個叫做"rowdata.html"的檔案。
這樣雖然有最詳細的數據，但是因為一頁只有15篇文章，其他文章還要到別頁來複製html，"太麻煩了"，如果想要得到全部的文章的瀏覽量，你也可以從"內容作品管理"來複製html
從內容作品管理
從內容作品管理的好處是你可以一次拿到所有文章的數據，但是只有下列資料
文章標題,文章連結,文章發佈來源,文章發佈時間,已發表狀態,愛心數,收藏數,瀏覽量
但是要注意的是，方格子是一個寫得不錯的動態網頁，也就是數據都是動態從js來call，所以如果你要全部的文章數據，你要記得先滾到最下面，才會拿到所有資料。
如果你想要詳細的資料，就要從數據統計，但是我自己是覺得看瀏覽量就夠了。
一樣的複製方式，這邊按右鍵點擊 "檢查"，然後將html從最上面整個複製下來，複製下來的方式就是按右鍵到"copy"裡面選"copy element"，存成一個.html檔案，如果你要用我後面的程式碼的話建議存成一個叫做"rowcontent.html"的檔案
在本地端執行程式碼
我的python版本是 Python3.9.13，不同版本會不會有問題，我不知道，如果有問題的話看你是要改程式碼、改Python版本，或是你直接用colab的版本也可以，我會分享在下面。
處理數據統計的html
將要處理的資料存成 "rowdata.html" 之後，你可以直接複製下面的程式碼，然後點擊執行應該就可以了，輸出檔案會叫做例如 "output_202310191323.csv"，前面會記錄你執行當下的"年月日時分"，當然你也可以自己改名字。
import csv
from bs4 import BeautifulSoup
from datetime import datetime
# 獲取當前日期和時間
current_datetime = datetime.now()
formatted_datetime = current_datetime.strftime("%Y%m%d%H%M")
# 打開HTML文件並解析
with open('rowdata.html', 'r', encoding='utf-8') as file:
soup = BeautifulSoup(file, 'html.parser')
# 創建CSV文件並寫入標頭
output_filename = f"output_{formatted_datetime}.csv"
with open(output_filename, 'w', newline='', encoding='utf-8') as csv_file:
writer = csv.writer(csv_file)
writer.writerow(['標題', '類型', '發佈日期', '瀏覽量', '已讀', '完讀率', '愛心', '收藏數', '留言數', '付費牆點擊'])
# 尋找所有包含數據的<tr>標籤
rows = soup.find_all('tr', class_='tablestyle__Tr-sc-1u3ja6e-6 ebHDIS')
# 遍歷每一行並提取數據
for row in rows:
title = row.find('div', class_='general__Title-sc-1ux0q9s-6 hBfWMn').text.strip()
label = row.find('div', class_='general__Label-sc-1ux0q9s-5 biQwxR').text.strip()
date = row.find_all('td', class_='tablestyle__Td-sc-1u3ja6e-7 eEHPfZ')[0].text.strip()
columns = [td.text.strip() for td in row.find_all('td', class_='tablestyle__Td-sc-1u3ja6e-7 eEHPfZ')[1:]]
# 寫入CSV文件
writer.writerow([title, label, date] + columns)
print(f"數據已保存到 {output_filename} 文件。")
處理內容作品管理的html
將要處理的資料存成 "rowcontent.html" 之後，你可以直接複製下面的程式碼，然後點擊執行應該就可以了，輸出檔案會叫做例如 "202310191354_articles.csv"，前面會記錄你執行當下的"年月日時分"，當然你也可以自己改名字。
import csv
from bs4 import BeautifulSoup
from datetime import datetime
# 獲取當前日期和時間
current_datetime = datetime.now()
formatted_datetime = current_datetime.strftime("%Y%m%d%H%M")
# 讀取HTML文件
with open('rowcontent.html', 'r', encoding='utf-8') as file:
html = file.read()
# 創建Beautiful Soup對象
soup = BeautifulSoup(html, 'html.parser')
# 格式化HTML文件
formatted_html = soup.prettify()
# 將格式化後的HTML保存到文件
with open('formatted_html.html', 'w', encoding='utf-8') as formatted_file:
formatted_file.write(formatted_html)
# 尋找文章卡片元素
articles = soup.find_all('div', class_='articleManageCard__CardWrapper-sc-1i8sb3r-0 eHOleU')
# 初始化儲存數據的列表
data = []
# 遍歷文章卡片元素
for article in articles:
# 提取文章數據（您的數據提取部分，請根據您的HTML結構進行調整）
title_element = article.find('div', class_='articleManageCard__ArticleTitle-sc-1i8sb3r-6 fUZfsk')
if title_element:
title = title_element.find('a').text.strip()
link = title_element.find('a')['href']
else:
title = "無標題"
link = "無連結"
source_element = article.find('div', class_='articleManageCard__PublicationTitle-sc-1i8sb3r-11 dGGDfS')
source = source_element.text.strip() if source_element else "無"
time_element = article.find('span', class_='articleManageCard__Time-sc-1i8sb3r-18 ehPlqw')
time = time_element.text.strip() if time_element else "無"
status_element = article.find('div', class_='articleManageCard__ArticleStatus-sc-1i8sb3r-17 jAScvu')
status = status_element.text.strip() if status_element else "無"
like_element = article.find('div', class_='iconCount__IconCountWrapper-sc-otd9xy-0 epbQsV')
like = like_element.find('span', class_='iconCount__Count-sc-otd9xy-1 bgFJFP').text.strip() if like_element else "0"
bookmark_elements = article.find_all('div', class_='iconCount__IconCountWrapper-sc-otd9xy-0 epbQsV')
class_name = 'iconCount__Count-sc-otd9xy-1 bgFJFP'
bookmark = bookmark_elements[1].find('span', class_=class_name).text.strip() if len(
bookmark_elements) > 1 else "0"
view = bookmark_elements[2].find('span', class_=class_name).text.strip() if len(
bookmark_elements) > 2 else "0"
# 添加建立時間列
created_time = current_datetime.strftime("%Y-%m-%d-%H-%M")
# 將提取的數據添加到列表
data.append([title, link, source, time, status, like, bookmark, view, created_time])
# 將數據保存到CSV文件，使用帶有當前日期和時間的文件名
csv_filename = f"{formatted_datetime}_articles.csv"
with open(csv_filename, 'w', newline='', encoding='utf-8') as csv_file:
writer = csv.writer(csv_file)
# 添加CSV文件標題行
writer.writerow(["文章標題", "文章連結", "文章發佈來源", "文章發佈時間", "已發表狀態", "愛心數", "收藏數", "瀏覽量", "建立時間"])
# 寫入數據行
for row in data:
writer.writerow(row)
print(f"數據已保存到 {csv_filename} 文件。")
在colab端執行程式碼
因為不是每一個人的會在自己的電腦裝Python、Visual Studio code 這些東西，所以我就把程式碼放到 google的Colab上面，這樣基本上大家都可以執行，而且資料也可以直接存到你的雲端硬碟裡面。
處理數據統計的html
https://colab.research.google.com/drive/10ibAnwHEE-VgpmnHLwaucXBadyuSBlHH?usp=sharing
處理內容作品管理的html
https://colab.research.google.com/drive/1sM0A-GTy9ELSuY6q7vQ0PknxhV9QclI6?usp=sharing
沒有Colab?
如果點擊之後他寫說沒有 Colab，你可以到 “新增”、"更多"、"連結更多應用程式"，然後打colab之後，安裝完就可以用了。
點擊後顯示無法預覽
另外點擊連結之後如果顯示無法預覽，就點上面使用colab
怎麼執行
執行之前先把前面的html檔案放到你的雲端硬碟的首頁，基本上再按下旁邊的箭頭就可以執行了
警示標語
他會顯示這個提醒警告標語，給你一個執行程式碼前的提醒。
雖然我的程式碼不會得到你任何資料，但是你如果有疑慮就不要用。
連線至你的雲端硬碟
接下來你會需要連線至你的雲端硬碟來讀取你的html還有存放執行後的檔案，一樣，我的程式碼不會得到你任何資料，但是你如果有疑慮就不要用。
我想要有自己的版本
如果你想要自己改程式碼，你也可以點擊"檔案"，"在雲端硬碟中儲存副本"，這樣你就創造自己的一個版本了
我想要改存放位置
請將你的html資料放到雲端硬碟的首頁上，也就是下列這一行位置，當然你要自己改位置也可以，只要改下面這一段:
改原始html位置：
with open('/content/drive/My Drive/rowcontent.html', 'r', encoding='utf-8') as file:
改輸出位置：
output_filename = f"/content/drive/My Drive/output_{formatted_datetime}.csv"
寫完後的心得
明明是下午給自己的一個休息時間，沒想到還是虐了自己一波。
想寫這個程式碼很久了，也構思過一陣子，終於下定決心寫出了這個最基礎的版本。
總結起來我大約花了兩個多小時寫出兩個程式碼，包含本地端跟colab版本，然後再花四五個小時寫這一篇文章，其實覺得蠻白痴的。
你說這麼簡單兩個程式碼要弄這麼久，我知道
你說這麼初階的版本也敢放上來，我知道
你說還要自己複製html怎麼這麼麻煩，我知道
你說你文章寫這麼多，排版這麼爛，邏輯搞得這麼複雜誰看得懂，我知道
但我時間也不太夠，對互動式的網頁也還沒有設計好概念，而且寫這個也沒有錢。
但我希望會有人接著寫出更好的程式碼來給大家用。
我是真的喜歡寫方格子，也很關心數據，也想要讓大家都可以使用我的程式碼所得到的成果，更希望我拋磚引玉後，有大神可以寫出更好的程式碼，甚至把後面的畫圖、網頁互動頁面寫出來，我會發自內心的感謝。
當然如果官方可以直接解決這個問題，那我會更加感謝。
方格子 Vocus 信用卡綁定更新了，歡迎大家多多贊助我，支持我的創作
我是凱文馬拉穆，我們下次見
