All posts by Max

Growth 流量成長數據分析

筆記分享 – 6個 Google Data Studio 的小技巧

小編參加了 Measure Summit 大會,整理了講者 Ahmad Kanani (Siavak) 分享的 6個 Google Data Studio 小秘訣,筆記分享給大家快速參閱!

另外對 Data Studio 有興趣的朋友,分享一個小編最近發起的活動:「Data Studio 模板」的活動,每週接棒分享,目前進入第四週,可以參考過去分享者的模板如下:

第一招 Page Setting

Google Data Studio Page Setting
  • 重點:學習如何設定 Page-level 的「背景顏色」、「篩選器」、「資料來源」、「畫布大小」
  • 實作:在分頁中,點選右鍵 > Current page settings 為每一頁設定 page-level 的資料源和樣式

第二招 Styling Secrets

Google Data Studio Styling Secrets
  • 重點:快速複製設定好的格式
  • 實作:針對已經設定好的格式欄位右鍵點選 Copy,然後點選未設定格式的欄位,點選右鍵,可以直接貼上主題 (Paste style only)!

第三招 Usage Tracking

Google Data Studio Usage Tracking
  • 重點:在 Data Studio 中埋設 Google Analytics 分析
  • 實作:左上角檔案 > 報表設定 > 填入 Google Analytics ID
  • 補充:填入後可以看到這份 report 觀看者的數據,例如「地區」、「停留時間」、「被 Duplicated」 的次數,所以你可以輕鬆做一個 Data Studio Template 來追中  Data Studio Template 的數據

第四招 Data Blending

Google Data Studio Data Blending
  • 重點:混合資料
  • 實作:點選兩個要合併的表格,點擊右鍵後,選擇混合資料
  • 補充:混合資料很實用,但要留意如果因為數據太大,會導致 Data Studio 圖表跑不太出來。另外記得混合資料是「Left Join」,沒辦法使用聯集「Union」的方法;講者提到如果要 Union 的,建議可以使用 3rd Google Sheet 實作。

第五招 Row level Security

Google Data Studio Row level Security
  • 重點:判別使用者登入的 Gmail,來篩選觀看的 report 資料
  • 實作:資料來源左上角,選擇依電子郵件篩選 (記得資料欄位裡面要有 Email 的欄位唷!)

第六招 Field IDs

Google Data Studio Field IDs
  • 重點:當有兩個資料來源,想用一個控制項來篩選時,Field IDs 就派得上用場了!
  • 實作:新增欄位參數,即可取得 Field ID

最後 Bonus

如果有 G Suite 的 admin 帳號,可以看到底下的帳號使用 Data Studio 的情況。進入網址:https://admin.google.com/ac/reporting/audit/data_studio

Google Data Studio G suite admin

Data studio 可以用 emojis 了!

Google Data Studio emojis

那講者分享筆記就到這邊,希望大家對 Data Studio 各種神奇技巧有更深了解和幫助~

Google Tag Manager

[GTM 教學] 什麼是 Custom templates 自訂範本

ㄧ. 什麼是 GTM 自訂範本?

Custom templates allow you to write your own tag and variable definitions so that others within your organization can use them alongside the built-in tag and variable templates.  Google Tag Manager

Custom templates 用一句話來說就是將重複性的代碼轉為模板。

GTM 官方的解釋來說,就是提供客製化代碼的模板,讓使用者可以在模板化的情況下輸入變數,輕鬆的創建和共享自訂的 JavaScript 和 HTML 設置。

二. 設定教學

首先進入 GTM Custom templates 自訂模板後,可以看到四個細項可以選擇:

  • 資訊:資訊欄位是用來告訴使用者 templates 的使用功能和敘述,不管輸入什麼都不會影響到此模板接下來程式的執行
  • 欄位:用於設定使用者的介面
  • 程式碼:當此模板被觸發時,會執行的程式,細節待會會再補充
  • 權限:可用於限制程式碼擁有多少操作權限

1. 設定欄位:

點選 Custom templates 欄位後,使用新增欄位,能選擇的類型蠻多的,有文字、下拉式選單、CheckBox、按鈕……等,這邊使用文字輸入來介紹,選擇新增文字輸入欄位後,使用者會在介面上看到一個輸入文字的方框。

在輸入文字的上方點擊齒輪,可以看到更細項的設定,而將文字輸入的命名為 endPoint,這邊的命名在待會的程式碼會用到,可以留意一下。

另外也可以限制使用者輸入的值,例如增加驗證規則,這邊設定是讓使用者需輸入 https 的規則運算式。

關於更多 Custom templates 欄位的介紹可以參考 GTM 官方這篇:Custom templates quick start guide

2. 設定程式碼:

Custom templates 程式碼的部分是使用 2019/8月官方推出的 addEventCallback 這個 API 來寫的,功能簡單來說就是當觸發 dataLayer events 完成時,發送 request 到指定 URL,可用於製作判定事件完成與否的監控器。

關於更多其他的 Custom templates API 方法可以參考 GTM 官方這篇:Custom template APIs

此次完整程式碼如下:

// Require the necessary APIs
const addEventCallback = require('addEventCallback');
const readFromDataLayer = require('copyFromDataLayer');
const sendPixel = require('sendPixel');
const getTimestamp = require('getTimestamp');

// Get the dataLayer event that triggered the tag
const event = readFromDataLayer('event');

// Add a timestamp to separate events named the same way from each other
const eventTimestamp = getTimestamp();

const endPoint = data.endPoint;
const batchHits = data.batchHits === 'yes';
const maxTags = data.maxTags;

// Utility for splitting an array into multiple arrays of given size
const splitToBatches = (arr, size) => {
  const newArr = [];
  for (let i = 0, len = arr.length; i < len; i += size) {
    newArr.push(arr.slice(i, i + size));
  }
  return newArr;
};

// The addEventCallback gets two arguments: container ID and a data object with an array of tags that fired
addEventCallback((ctid, eventData) => {

  // Filter out tags that have the "exclude" metadata set to true
  const tags = eventData.tags.filter(t => t.exclude !== 'true');
  
  // If batching is enabled, split the tags into batches of the given size
  const batches = batchHits ? splitToBatches(tags, maxTags) : [tags];
  
  // For each batch, build a payload and dispatch to the endpoint as a GET request
  batches.forEach(tags => {
    let payload = '?eventName=' + event + '&eventTimestamp=' + eventTimestamp;
    
    tags.forEach((tag, idx) => {
      const tagPrefix = '&tag' + (idx + 1);
      payload +=
        tagPrefix + 'id=' + tag.id +
        tagPrefix + 'nm=' + tag.name +
        tagPrefix + 'st=' + tag.status +
        tagPrefix + 'et=' + tag.executionTime;
      
      log(['GTM_Tag Status'],tag.status);
    
    });
    log(['GTM_This is payload'],payload);
    
    sendPixel(endPoint + payload, null, null);
  });
});

// After adding the callback, signal tag completion
data.gtmOnSuccess();

// 代碼結束時呼叫 data.gtmOnSuccess。
data.gtmOnSuccess();

可以看到 const endPoint = data.endPoint; 這邊的 endPoint 就是使用者輸入的文字框內的值,這邊將參數附加在 endPoint 後面,最後再用Custom template 提供的 sendPixel API 來向指定的 URL 發送 GET 請求,最後代碼結束時需呼叫 data.gtmOnSuccess()

3. 設定權限:

從 Custom templates 權限內可以看到讀取資料庫的部分有輸入 event ,是因為我們在程式碼內有使用到 const event = readFromDataLayer(‘event’) 所以要給予 event 的權限。

關於更多 Custom templates 其他權限可以參考GTM官方這篇:Custom template permissions

4. 設定 GTM 代碼:

設定好 templates 後,你就可以在代碼內選取剛剛設定好的範本,而畫面就是剛剛我們在範本欄位內選擇的畫面,至於執行的程式就是我們剛剛寫入的範本程式。

基本上這樣就完成了一個 GTM 的 Monitor,最後只需要再將 Request GET 的部分將資料轉入資料庫就完成囉!

那 [GTM 教學] 什麼是Custom templates 自訂範本 就到這告一段落,如有任何問題歡迎留言!

此篇文章轉載至 Max行銷誌