【教學】如何用程式碼追蹤Vocus文章每日流量?第一版

更新於 發佈於 閱讀時間約 20 分鐘


不知道自己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"的檔案。

raw-image
raw-image


這樣雖然有最詳細的數據,但是因為一頁只有15篇文章,其他文章還要到別頁來複製html,"太麻煩了",如果想要得到全部的文章的瀏覽量,你也可以從"內容作品管理"來複製html


從內容作品管理

從內容作品管理的好處是你可以一次拿到所有文章的數據,但是只有下列資料

文章標題,文章連結,文章發佈來源,文章發佈時間,已發表狀態,愛心數,收藏數,瀏覽量


但是要注意的是,方格子是一個寫得不錯的動態網頁,也就是數據都是動態從js來call,所以如果你要全部的文章數據,你要記得先滾到最下面,才會拿到所有資料。


如果你想要詳細的資料,就要從數據統計,但是我自己是覺得看瀏覽量就夠了。


一樣的複製方式,這邊按右鍵點擊 "檢查",然後將html從最上面整個複製下來,複製下來的方式就是按右鍵到"copy"裡面選"copy element",存成一個.html檔案,如果你要用我後面的程式碼的話建議存成一個叫做"rowcontent.html"的檔案

raw-image
raw-image



在本地端執行程式碼

我的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之後,安裝完就可以用了。

raw-image


點擊後顯示無法預覽

另外點擊連結之後如果顯示無法預覽,就點上面使用colab

raw-image


怎麼執行

執行之前先把前面的html檔案放到你的雲端硬碟的首頁,基本上再按下旁邊的箭頭就可以執行了

raw-image


警示標語

他會顯示這個提醒警告標語,給你一個執行程式碼前的提醒。

雖然我的程式碼不會得到你任何資料,但是你如果有疑慮就不要用。

raw-image


連線至你的雲端硬碟

接下來你會需要連線至你的雲端硬碟來讀取你的html還有存放執行後的檔案,一樣,我的程式碼不會得到你任何資料,但是你如果有疑慮就不要用。

raw-image



我想要有自己的版本

如果你想要自己改程式碼,你也可以點擊"檔案","在雲端硬碟中儲存副本",這樣你就創造自己的一個版本了

raw-image



我想要改存放位置

請將你的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 信用卡綁定更新了,歡迎大家多多贊助我,支持我的創作

我是凱文馬拉穆,我們下次見

我的贊助連結





留言
avatar-img
留言分享你的想法!
avatar-img
凱文馬拉穆の 雪橇犬星球
39.9K會員
516內容數
本專題將探討科技在投資領域的應用。我們將介紹人工智能、大數據分析和自動化投資工具,並解釋如何利用這些技術來優化投資策略和增加投資回報。透過了解智能投資的趨勢和方法,讀者可以更加精準地進行投資決策,提升投資效率和成果。我們也會介紹不同的投資工具和策略,解釋風險與回報的關係,並提供基本的投資原則和技巧。
2025/04/12
現代人生活步調緊湊,分心的事物太多,難以專注。本文作者分享自身經驗,說明如何打造「無幹擾區間」,透過刻意安排時間和空間,排除幹擾,提升專注力,找回內在平靜。文中提及番茄工作法、學術研究佐證,並提供打造無幹擾區間的實用方法,鼓勵讀者嘗試,找回專注與平靜。
Thumbnail
2025/04/12
現代人生活步調緊湊,分心的事物太多,難以專注。本文作者分享自身經驗,說明如何打造「無幹擾區間」,透過刻意安排時間和空間,排除幹擾,提升專注力,找回內在平靜。文中提及番茄工作法、學術研究佐證,並提供打造無幹擾區間的實用方法,鼓勵讀者嘗試,找回專注與平靜。
Thumbnail
2025/03/24
探討正面與負面情緒的平衡,指出負面情緒並非敵人,而是成長的助力,並提供五個重新理解情緒價值的方法,幫助讀者在生活中找到平衡,避免過度樂觀或沉溺負面情緒。
Thumbnail
2025/03/24
探討正面與負面情緒的平衡,指出負面情緒並非敵人,而是成長的助力,並提供五個重新理解情緒價值的方法,幫助讀者在生活中找到平衡,避免過度樂觀或沉溺負面情緒。
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
呈上次使用logging來撰寫日誌,利用類別包裝的方式,可實現多個日誌紀錄器,但發現這樣就失去它原先,可以回傳是誰呼叫他並記錄行數的功能。 [Python]使用logging創建兩個以上的日誌紀錄 若開啟函式名稱、行數及訊息的功能,就會像這樣,幾乎都是記錄到,我定義中類別的函式
Thumbnail
呈上次使用logging來撰寫日誌,利用類別包裝的方式,可實現多個日誌紀錄器,但發現這樣就失去它原先,可以回傳是誰呼叫他並記錄行數的功能。 [Python]使用logging創建兩個以上的日誌紀錄 若開啟函式名稱、行數及訊息的功能,就會像這樣,幾乎都是記錄到,我定義中類別的函式
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Thumbnail
前言 Vue 是一個現代開發框架,擁有完尚的生態系,讓我們可以將須多元件客製化,做出組件,並且可重複利用,高擴充性。在開發組件時,每個組件都擁有自己的生命周期,Vue 組件會偵測每個變數值,是否有變,並且更新內容,今天要一個一個了解 Vue 的生命週期,讓大家有更多認識。 Vue 的生命週期
Thumbnail
前言 Vue 是一個現代開發框架,擁有完尚的生態系,讓我們可以將須多元件客製化,做出組件,並且可重複利用,高擴充性。在開發組件時,每個組件都擁有自己的生命周期,Vue 組件會偵測每個變數值,是否有變,並且更新內容,今天要一個一個了解 Vue 的生命週期,讓大家有更多認識。 Vue 的生命週期
Thumbnail
幾天不用,剛剛發現之前的程式碼已經不能使用了,我想可能是因為html結構有所改變,之前的程式碼可以看下面這一篇文章 【程式碼教學】追蹤自己 Vocus文章每日流量,第二版 1027 更新後的程式碼 import csv from bs4 import BeautifulSoup
Thumbnail
幾天不用,剛剛發現之前的程式碼已經不能使用了,我想可能是因為html結構有所改變,之前的程式碼可以看下面這一篇文章 【程式碼教學】追蹤自己 Vocus文章每日流量,第二版 1027 更新後的程式碼 import csv from bs4 import BeautifulSoup
Thumbnail
程式碼第二版 1027 剛剛發現之前的程式碼已經不能使用了,我想可能是因為html結構有所改變,另外也想順便處理一下數字如果是含有"K"的數字時,順便轉化一下,時間有限,所以想知道來龍去脈請看下面文章。 【教學】如何用程式碼追蹤Vocus文章每日流量?第一版 【教學】如何用程式碼追蹤V
Thumbnail
程式碼第二版 1027 剛剛發現之前的程式碼已經不能使用了,我想可能是因為html結構有所改變,另外也想順便處理一下數字如果是含有"K"的數字時,順便轉化一下,時間有限,所以想知道來龍去脈請看下面文章。 【教學】如何用程式碼追蹤Vocus文章每日流量?第一版 【教學】如何用程式碼追蹤V
Thumbnail
上一篇我們已經介紹過Google Colab的基本用法,建議可以先行閱讀「【Google Colab系列】台股分析預備式: Colab平台與Python如何擦出火花?」,進行基本概念與環境的建置再進行下一步會比較容易進行學習。 雖然網路上已經提供非常多的股市資訊,但各個網站可能都零零散散,難免我們得
Thumbnail
上一篇我們已經介紹過Google Colab的基本用法,建議可以先行閱讀「【Google Colab系列】台股分析預備式: Colab平台與Python如何擦出火花?」,進行基本概念與環境的建置再進行下一步會比較容易進行學習。 雖然網路上已經提供非常多的股市資訊,但各個網站可能都零零散散,難免我們得
Thumbnail
事情是這樣的,這個網站是用WordPress建置,本來放在GoDaddy虛擬主機上,當時的方案簽了三年,在大約一年半的時候,我決定把網站搬到SiteGround上。為了不讓GoDaddy的主機空轉,剛好我也想做些Side Projects,試著在網站上建立數據儀表板,GoDaddy的主機剛好可以拿來
Thumbnail
事情是這樣的,這個網站是用WordPress建置,本來放在GoDaddy虛擬主機上,當時的方案簽了三年,在大約一年半的時候,我決定把網站搬到SiteGround上。為了不讓GoDaddy的主機空轉,剛好我也想做些Side Projects,試著在網站上建立數據儀表板,GoDaddy的主機剛好可以拿來
Thumbnail
知識流動,一日分享 初學者最愛 寫程式很麻煩的第一個關鍵,就是安裝程式,有時候菜鳥搞了好幾個小時還無法搞定,設定很多玩意兒,有時候就把一開始的熱情琢磨掉了。 隨著python的穩定度逐漸提升,很多平台紛紛支援線上撰寫的功能,在這裡推薦Google Colab,對於一般使者而言就夠用了,而且省去安裝的
Thumbnail
知識流動,一日分享 初學者最愛 寫程式很麻煩的第一個關鍵,就是安裝程式,有時候菜鳥搞了好幾個小時還無法搞定,設定很多玩意兒,有時候就把一開始的熱情琢磨掉了。 隨著python的穩定度逐漸提升,很多平台紛紛支援線上撰寫的功能,在這裡推薦Google Colab,對於一般使者而言就夠用了,而且省去安裝的
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
目前 Vocus 平台無法像 Medium 平台一樣有 code block 的顯示功能。因此如果想在文章中分享程式碼或數學式,就只能另闢蹊徑。
Thumbnail
目前 Vocus 平台無法像 Medium 平台一樣有 code block 的顯示功能。因此如果想在文章中分享程式碼或數學式,就只能另闢蹊徑。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News