// 1. 取得勾選項目

        var items = [];

        $.each($(“.select-export:checked”), function(){

            items.push($(this).val());

        });

            var form_data = new FormData();

            form_data.append(‘ids’, items);

        // 2. 匯出

          $.ajax({

            url: “/Product/export”,

            type: “POST”,

            dataType: “text”,

            data: form_data,

            contentType: false,

            processData: false,

            success: function(data) {

            },

            error: function(XMLHttpRequest, textStatus, errorThrown) {

            }

        });

PHP Controller 接值  (use  codeigniter)

$_REQUEST[‘ids’];

這篇文章 透過 ajax傳遞 checkbox:checked 陣列 & codeigniter Controller 接值 最早出現於 任姓人妻 の 生活紀錄。

後來改為匯出 .xlsx，發現上面的方式失效了，匯出會變成公式格式
雖然點擊Excel的編輯可以正常顯示，但是如果要匯入其他介面，會讀取失敗。
後來找到其他前輩的解法，加上 \t 就搞定了！
雖然參考的文章是針對CSV，但死馬當活馬醫，竟然也適用～
$memberPhone = “\t”.$member->phone;

一開始不懂 \t 的來由是啥，後來發現了
原來\t 就是Tab的意思
用Mac的Numbers打開，會發現資料前面會有一片空格
但如果是用正規的Excel打開就會顯示正常～

這篇文章 PHP匯出Excel (.xls .xlsx) ，電話/手機 第一碼0會不見 最早出現於 任姓人妻 の 生活紀錄。

如果你的網站是電商平台 或者 你沒有編輯程式的權限
可是又想要利用cookie來達成某些目的，只要你會JS，就可以透過GTM來setCookie

設定說明

新增一組代碼，選擇 自訂HTML，然後將 JS Code 放上去，
觸發條件(Trigger) 選擇什麼時機點要SetCookie

這篇文章 Google Tag Manager – SetCookie 最早出現於 任姓人妻 の 生活紀錄。

一般會使用 最新文章 的小工具
但是我想要依照 文章類別 各別顯示最新文章，例如下圖所示

程式碼

參考官方文件，使用 wp_get_recent_posts()

//傳入參數
$args = array(
	'numberposts' => 3,        //要秀幾筆
	'offset' => 0,
	'category' => 4,           //分類的ID   0:不分類的最新文章
	'orderby' => 'post_date',  //排序欄位
	'order' => 'DESC',         //排序方式
	'include' => '',
	'exclude' => '',
	'meta_key' => '',
	'meta_value' =>'',
	'post_type' => 'post',
	'post_status' => 'publish',   //文章狀態
	'suppress_filters' => true
);

//取資料
$recent_posts = wp_get_recent_posts( $args, ARRAY_A );

//迴圈秀資料
foreach( $recent_posts as $recent ){
        echo '<li><a href="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</a> </li> ';
}

這篇文章 【WordPress】依 分類 呈現 最新文章 最早出現於 任姓人妻 の 生活紀錄。

先前要監控頁面 滾軸事件 ，需要自己貼上 JS Code (當然是複製別人寫好的來用)
最近有看到新文章，現在不用貼Code了，直接在GTM設定就可以了
今天剛好在做GTM案例分享，就順便測試了一下。
 

Step1  變數 > 設定，先檢查變數是否有勾選這三個項目

Step2  設定 Triggers (觸發條件)

Step3   代碼 設定 GA 事件

這篇文章 Google Tag Manager – 滾軸事件 最早出現於 任姓人妻 の 生活紀錄。

以下是個人調整過很多次URL的心得

一般模式：是wordpress預設的URL, 挺沒意義的，所以正常不會使用這種模式。

日期/月份：我覺得日期跟月份也挺多餘的啦，所以不採納。

文章模式：個人有個習慣，三不五時回顧文章時，會調整一下文章標題，如果已被搜尋引擎收錄，就會找不到此文章了！

最後採納  文章ID + 文章標題

ID 就是文章的唯一值，不管我的文章標題修改N次，或者直接刪掉文章標題，都可以找到此篇文章。

這篇文章 【WordPress】固定網址 最早出現於 任姓人妻 の 生活紀錄。

這個外掛說明寫得挺詳細的，我就懶得截圖了
https://tw.wordpress.org/plugins/duplicate-page/

​這樣相同架構的文章或頁面，透過一鍵複製就可以快速修改了。

這篇文章 【WordPress】 Duplicate Page 複製文章/複製頁面 最早出現於 任姓人妻 の 生活紀錄。

記錄 Youtube 影片點擊
找了很久終於找到 一篇文章，按照他的步驟就可以設定完畢了
看英文需要很有耐心才能仔細看完，所以我用中文重新記錄一下。
總共要設定 4個變數、2個觸發條件、2個代碼。
 

設定變數 Variables

新增「使用者定義的變數」

變數名稱  ➤ YouTube is present

複製以下程式碼，這一段判斷頁面上是否有Youtube的影片

// Return "true" if there is at least one YouTube video on the page
function () {
   for (var e = document.getElementsByTagName('iframe'), x = e.length; x–;)
   if (/youtube.com\/embed/.test(e[x].src)){
      return true;
   }
   return false;
}

變數名稱  ➤ dataLayer category

設定GA事件時，會用到的變數。

變數名稱  ➤ dataLayer action

設定GA事件時，會用到的變數。

變數名稱  ➤ dataLayer label

設定GA事件時，會用到的變數。

設定觸發條件  Triggers

觸發條件  ➤ Youtube event

這個不知道該怎解釋，我也不清楚如何作用

觸發條件  ➤ Youtube present

判斷頁面上是否有 Youtube 影片

設定代碼 Tags

代碼名稱  ➤ YouTube Event
代碼類型  ➤ 通用 Analytics
追蹤類型  ➤ 事件
觸發條件  ➤ YouTube event

代碼名稱  ➤ YouTube Listener​
代碼類型  ➤ 自訂HTML​
觸發條件  ➤ YouTube present

複製以下程式碼
這一大段監控了很多事件, 藍色字體就是監控的項目
ex. 點播放、按暫停、使用者從百分之多少開始觀看

<!–
Google Analytics Tag Manager (V2) custom HTML tag for YouTube video tracking

Copyright 2015, Cardinal Path, Inc.

Original author: Stephane Hamel <shamel@cardinalpath.com>
Revised by: Nicky Yuen <nyuen@cardinalpath.com>

Version 1.0
–>
<script type="text/javascript">
    // support multiple players on the same page
    var gtmYTPlayers = [];
    
    // OPTIONAL: Enable JSAPI if it's not already on the URL
    // note: this will cause the YouTube player to "flash" on the page when reloading to enable the JS API
    for (var e = document.getElementsByTagName("iframe"), x = e.length; x–;)
        if (/youtube.com\/embed/.test(e[x].src))
            if (e[x].src.indexOf('enablejsapi=') === -1)
                e[x].src += (e[x].src.indexOf('?') === -1 ? '?' : '&') + 'enablejsapi=1';
        
    /**
     * Attaches listener once the YouTube API is loaded    
    **/
    function onYouTubeIframeAPIReady() {
        for (var e = document.getElementsByTagName("iframe"), x = e.length; x–;) {
            if (/youtube.com\/embed/.test(e[x].src)) {
                gtmYTPlayers.push(new YT.Player(e[x], {
                    events: {
                        onStateChange: onPlayerStateChange,
                        onError: onPlayerError
                    }
                }));
                YT.gtmLastAction = "p";
            }
        }
    }

    /**
     * Listen for play/pause. Other states such as rewind and end could also be added
     * Also report % played every second
     * @param e – event
    **/
    function onPlayerStateChange(e) {
        e[“data”] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e[“target”]);
        var video_data = e.target[“getVideoData”](),
            label = video_data.video_id + ':' + video_data.title;
        if (e[“data”] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p") {
            dataLayer.push({
                event: 'youtube',
                eventCategory: 'youtube',
                eventAction: 'play',
                eventLabel: label
            });
            YT.gtmLastAction = "";
        }
        if (e[“data”] == YT.PlayerState.PAUSED) {
            dataLayer.push({
                event: 'youtube',
                eventCategory: 'youtube',
                eventAction: 'pause',
                eventLabel: label
            });
            YT.gtmLastAction = "p";
        }
    }

    /**
     * Catch all to report errors through the GTM data layer. once the error is exposed to GTM, it can be tracked in UA as an event!
     * Refer to https://developers.google.com/youtube/js_api_reference#Events onError
     * @param: e (event)
    **/
    
    function onPlayerError(e) {
        dataLayer.push({
            event: 'error',
            eventCategory: 'youtube',
            eventAction: 'play',
            eventLabel: 'youtube: ' + e
        })
    }

    /**
     * Report the % played if it matches 0%, 25%, 50%, 75%, 90% or completed
     * @param: e (event)
    **/
    function onPlayerPercent(e) {
        if (e[“getPlayerState”]() == YT.PlayerState.PLAYING) {
            //var t = e[“getDuration”]() – e[“getCurrentTime”]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 4) / 4).toFixed(2);
            
            // Set the played duration to every tenth because we'll need to also capture 90% played.
            var t = e[“getDuration”]() – e[“getCurrentTime”]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 10) / 10).toFixed(2);
            
            if (parseFloat(t) < 0.25) {
                t = 0.00;
            }
            else if (parseFloat(t) < 0.5){
                t = 0.25;
            }
            else if (parseFloat(t) < 0.75){
                t = 0.50;
            }
            else if (parseFloat(t) < 0.9){
                t = 0.75;
            }
            else if (parseFloat(t) < 1){
                t = 0.90;
            }
            // duration t needs to be fixed to 2 decimal places
            t = t.toFixed(2);
            
            if (!e[“lastP”] || t > e[“lastP”]) {
                var video_data = e[“getVideoData”](),
                    label = video_data.video_id + ':' + video_data.title;
                e[“lastP”] = t;
                dataLayer.push({
                    event: "youtube",
                    eventCategory: 'youtube',
                    eventAction: t * 100 + "%",
                    eventLabel: label
                })
            }
            e[“lastP”] != 1 && setTimeout(onPlayerPercent, 1000, e);
        }
    }
    
    /**
     * Add unload event listener
    **/
    window.addEventListener('beforeunload', function(e){
        for (var i = 0; i < gtmYTPlayers.length; i++){
            if (gtmYTPlayers[i].getPlayerState() === 1) { // playing
                var video_data = gtmYTPlayers[i][‘getVideoData’](),
                label = video_data.video_id + ':' + video_data.title;
                
                dataLayer.push({
                    event: 'youtube',
                    eventCategory: 'youtube',
                    eventAction: 'exit',
                    eventLabel: label
                });
            }
        }
    })
    
    // load the Youtube JS api and get going
    var j = document.createElement("script"),
        f = document.getElementsByTagName("script")[0];
    j.src = "//www.youtube.com/iframe_api";
    j.async = true;
    f.parentNode.insertBefore(j, f);
</script>

GA呈現結果

使用次要維度，就可以區分不同的頁面。
但若同一個頁面有好多個影片，就要另外處理了～

次要維度選擇裝置類別，也可以觀看桌機或手機的數據。

這篇文章 GTM – 監控 Youtube 影片點擊 最早出現於 任姓人妻 の 生活紀錄。

頁面說明

頁面網址  http://xxx.com/active/20170728
頁面上只有一顆按鈕，按鈕名稱叫「想了解更多」

Trigger

1. 點擊頁面上的文字 包含 想了解更多
2. 頁面網址 包含 active/20170728
    我會多設定一項 Page Url
    避免其他頁面也有「想了解更多」, 這樣數據就會不準確。

頁面說明

頁面網址  http://xxx.com/active/20170729
頁面上有好多顆按鈕，按鈕名稱都叫「想了解更多」

想要追蹤哪一顆按鈕，被點擊的次數比較多
為了區分每顆按鈕，給予每一顆按鈕不同的class名稱
例如 btn1、btn2…等

Trigger

這裡選擇 Click Element, 而不是 Click Classes,
因為 Click Classes 我試了很多次都抓不到呀!!!  (後來設定成功了，下方有更新)
如果之後有研究出來，再來修正。

第一顆按鈕

第二顆按鈕

這種作法有點麻煩就是了，如果有10顆按鈕，就要製作10次。
可以寫成JS, 但還沒實際操作，研究完之後再補上。
 

Trigger Class Name

之前設定 Click Classes 一直不成功，終於發現原因了！
眉角就是，若有多組Class Name , 一定要包含第一個 Class Name，否則會判斷不到～

如果只設定 glyphicon-heart，Trigger 會沒有反應喔～

這篇文章 Google Tag Manager – Trigger 最早出現於 任姓人妻 の 生活紀錄。

古老時代

以前公司要埋一堆追蹤代碼 GA 、FB…等等
工程師總是要找到對應功能的程式位置
追蹤代碼散落一地!!! 程式碼看起來也超亂的。

GTM出現

出現GTM這個工具，它統一管理所有的追蹤代碼, 真的是好物呀～
這個工具對於工程師來說，比較好上手。
沒有工程背景的人，是需要一點時間學習，它不難學習，但需要一點邏輯。

用了GTM

改用GTM之後，網站只需要置入一段GTM追蹤碼，程式碼整個乾淨很多！
如果用wordpress, 只要安裝GTM外掛, 把GTM代碼填上去, 更方便！

如何開始跟安裝GTM，我就懶得寫了，因為動手 google 就一堆相關文章了。

這篇文章 Google Tag Manager – Google 代碼管理工具 最早出現於 任姓人妻 の 生活紀錄。