Swift Practice # 143 SwiftUI + Google Admob 廣告初探

Dogpa Chen
6 min readApr 3, 2022

--

上一篇完成了簡單的分享按鈕功能,將字串透過UIActivityViewController實現拷貝的功能,能夠貼到別的地方,也算是把朋友需要新增的功能給完成。

而這一篇則要嘗試將上架的作品新增廣告,對於一個App的營收,不外戶就是免費放上廣告或是收費。對於目前的我來說收費是個遙遠程度,所以先放個免費廣告來加減賺點閱。

這一篇就嘗試來自己走過一次Google AdMob的功能。並使用Banner的廣告。

1 註冊帳號:

如果已經註冊好AdMob的可以忽略這一段。

1–1 點選下面的網站點擊右上角註冊

1–2:選擇國家、時區與帳單貨幣後點勾選條款建立AdMob帳戶。

1–3 勾選所需要的訣竅後點選下一步驗證帳戶。

1–4:輸入手機帳號驗證帳號,依照需求點選驗證方式。

1–5 確認驗證成功。

2 設定帳戶:

在這要先完成付款方式設定,所以先完成後才開始處理後續功能。

2–1 點選付款>設定收款方式。

2–2 選填帳戶地址後執行下一步。

2–3 確認來到以下的頁面。

2–4 早上申請帳戶約下午收到帳號通過審核的email。

3 新建專案:

帳戶申請好終於可以來建立專案了。

3–1 點選左側廣告活動後點擊新增應用程式。

3–2 點選平台與是否已經上架,因為我是新的專案,所以點選沒有。

3–3 輸入應用程式名稱後點選新增應用程式。

3–4 點選完成。

4 新增橫幅廣告:

專案建立完成,準備加入Banner橫幅廣告。

4–1 點選首頁中新增廣告單元。

4–2 點選橫幅廣告。

4–3 輸入橫幅廣告單元名稱後點選建立廣告單元。

4–4 記得中間的兩個數字,後面會使用到,不建議可以使用我的!!然後點選完成。

5 使用CocoaPods匯入SDK:

這個套件好像還沒有SPM可以使用,所以要用比較舊的用法CocoaPods來安裝。若不知道怎麼安裝可以參照下列文章。

輸入套件指令如下

pod 'Google-Mobile-Ads-SDK'

6 plist新增Google指令:

SwiftUI的Plist一開始不會像UIKit出現在專案左側(如下圖)。

6–1 透過下圖點選+就會看到Plist出現在左側。

已出現的Plist

6–2 透過右鍵點選透過Source Code方法開啟。

開啟的情況(下圖)。

6–3 點開下方的Google AdMob文件,將裡面的更新的Plist貼到剛剛在Xcode開啟的Plist。

貼上後的部份截圖:

6–4 更新剛剛貼上來的plist的GADApplicationIdentifier ID改為剛剛步驟4–4取得的蘋果圖案的那串文字。

7 初始化Google AdMob :

7–1 在「專案名稱App」.swift檔案內加入初始化的程式碼。

8 新增Struct帶入GoogleMobileAds功能:

透過這個Struct建立GoogleADMob的功能使成為一個可以顯示的View。

8–1新增一個.swift檔案依照網路教學寫入功能。

9 ContentView加入Google ADMob:

將步驟8的Struct加入到ContentView內使用使其可以顯示廣告。

9–1 ContentView程式碼:

以上的漫長步驟終於迎來了要檢查是否成功的一刻了。

從上面的Gif可以看到成功地跳到Safari的頁面,基本上沒有問題了。

不過因為Apple有更改隱私權政策,所以若有需要綁定使用者廣告追蹤的話可以再參照Google的官方說明。大致上廣告的基本探索也已經完成了。下一步應該就是把邏輯寫好準備上架了!!持續加油。

參考資料:

--

--

Dogpa Chen
Dogpa Chen

Written by Dogpa Chen

Smile Coding / iOS轉職路ING

No responses yet