標籤: google

GTM 設定與使用

Monkianer

簡單說明 GTM 與 GA 的不同

Google Tag ManagerGoogle Analysis
  • 用來管理追蹤代碼
    (可以不用透過埋設新增代碼)
  • 傳送事件資料
  • 沒有報表
  • 追蹤代碼
  • 接收事件資料
  • 有圖形報表及數據統計

GTM 中也可以設定 Google 以外的追蹤代碼，例如自定新增 Facebook Pixel。
以下是設定 GA4 在 GTM 的步驟

設定 GA4

1. 選擇新增

2.輸入GA4 評估 ID

評估 ID 為 G- 開頭的字串。

3.設定觸發條件

基礎設定，在每個頁面都觸發。像是工程師手動安裝 Google 代碼在每個頁面的意思。

發送 GA4 事件

1. 選擇新增

沒有GA4 設定，只設定 GA4 事件也是可以的喔。

2.輸入GA4 評估 ID 以及事件名稱

如果有其他需要傳送的參數，也可以在此設定。例如 link_text 將會傳送該 click element 的 text 內容。

3.設定觸發條件

設定觸發條件的啟動時機，例如：Click URL 包含設定的網址時才會觸發

從 GTM 發送的事件名稱，可能需要一點時間才會在 GA4 中出現，設定完之後隔天再來觀察即可。

使用 GA4 DebugView

代碼管理工具中啟用 預覽 ，將會傳送數據至 GA4 DebugView 中，如果無法在 GA4 DebugView 中看到事件，請使用瀏覽器 Developer Tool -> Network 裡檢查 https://www.google-analytics.com/g/collect?……….. 中是否有 _dbg=1 參數，該參數代表 debug。
也可對單一參數進行 debug，設定方式可參閱[GA4] 在 DebugView 中監控事件 。

其他資源

代碼管理工具說明

iframe 如何跟著 RWD 網站縮放

Monkianer

這個方法對與 iframe embed 的物件通通有效 (ex: Youtube……)

原理是使用 .google-maps 裡的 padding-bottom (或 padding-top 也可以) 屬性將 iframe 撐開，這裡使用 75% 是因為 iframe 起始值的 width 為 600 而 height 為 450，所以 height 永遠為 width 的 0.75 。

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

See the Pen Responsive Embed iframe by Monkianer (@monkianer) on CodePen.

當然因為這裡只是使用 CSS  來縮放，所以沒有辦法使地圖縮放後保持在原本的中心。如果要的話需要使用 google maps 的 API 才行，不過當然如果你使用了 Javascript 來控制地圖的話，你也可以乾脆使用 JS 來縮放你的地圖並保持在地圖的中心。