LINE 機器人點擊自動幫使用者輸入文字並且追蹤使用者的觸發

Posted on by Clarence

最近看到一個應用很有趣，只要點擊特別的連結就可以跳到特定的 LINE 機器人並且幫使用者輸入文字，這個文字可以是特別的機器人指令，也可以是幫助使用者輸入很長文字的應用，而這件事情要怎麼做呢？

LINE 機器人發送文字

相信有在使用 LINE 機器人的開發者都知道 LINE 有一個特別的連結可以直接讓使用者找到自己的官方帳號，網址是 https://line.me/R/ti/p/@line_tw_dev 這邊以開發者官方社群為範例

那如果希望使用者打開 LINE 機器人也順便幫使用者輸入文字怎麼做呢？假設我現在希望出現的文字是 開發者官方社群 https://blog.clarence.tw 測試訊息 ，那就輸入

https://line.me/R/oaMessage/@line_tw_dev/?%E9%96%8B%E7%99%BC%E8%80%85%E5%AE%98%E6%96%B9%E7%A4%BE%E7%BE%A4%20https%3A%2F%2Fblog.clarence.tw%20%E6%B8%AC%E8%A9%A6%E8%A8%8A%E6%81%AF

網址結構是 https://line.me/R/oaMessage/{LINE ID}/?{text_message}

LINE ID：自己的 LINE 機器人 ID，這邊範例是 @line_tw_dev

test_message：需要幫使用者輸入的文字，需要注意文字的地方需要做 URL Encode 可以直接使用線上工具 https://www.urlencoder.org/，這邊的範例是開發者官方社群 https://blog.clarence.tw 測試訊息

效果如下：

追蹤使用者觸發

追蹤常用的是 Facebook Pixel 或 Google Tag Manager，這樣我們來寫一個網頁完成

<html>

<head>
    <meta property="og:site_name" content="LINE" />
    <meta property="og:title" content="LINE : Free Calls & Messages" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://d.line-scdn.net/n/line_lp/img/ogimage.png" />
    <meta property="og:description"
        content="LINE is a new communication app which allows you to make FREE voice calls and send FREE messages whenever and wherever you are, 24 hours a day!" />
    <!-- Facebook Pixel Code -->
    <script>
        !function (f, b, e, v, n, t, s) {
            if (f.fbq) return;
            n = f.fbq = function () {
                n.callMethod ?
                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)
            };
            if (!f._fbq) f._fbq = n;
            n.push = n;
            n.loaded = !0;
            n.version = '2.0';
            n.queue = [];
            t = b.createElement(e);
            t.async = !0;
            t.src = v;
            s = b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t, s)
        }(window,
            document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');

        fbq('init', '{your-pixel-id-goes-here}');
        fbq('track', "PageView");
    </script>
    <noscript><img height="1" width="1" style="display:none"
            src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1" /></noscript>
    <!-- End Facebook Pixel Code -->
</head>

<body>
    <script type="text/javascript">
        window.onload = function () {
            document.location.href = "https://line.me/R/oaMessage/@line_tw_dev/?%E9%96%8B%E7%99%BC%E8%80%85%E5%AE%98%E6%96%B9%E7%A4%BE%E7%BE%A4%20https%3A%2F%2Fblog.clarence.tw%20%E6%B8%AC%E8%A9%A6%E8%A8%8A%E6%81%AF";
        };
    </script>

</body>

</html>

如上部署好就可以擁有一個有 Facebook Pixel 追蹤的網頁了！

下一步把 Google Tag Manager 一起放進來

<html>

<head>
    <meta property="og:site_name" content="LINE" />
    <meta property="og:title" content="LINE : Free Calls & Messages" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://d.line-scdn.net/n/line_lp/img/ogimage.png" />
    <meta property="og:description"
        content="LINE is a new communication app which allows you to make FREE voice calls and send FREE messages whenever and wherever you are, 24 hours a day!" />
    <!-- Facebook Pixel Code -->
    <script>
        !function (f, b, e, v, n, t, s) {
            if (f.fbq) return;
            n = f.fbq = function () {
                n.callMethod ?
                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)
            };
            if (!f._fbq) f._fbq = n;
            n.push = n;
            n.loaded = !0;
            n.version = '2.0';
            n.queue = [];
            t = b.createElement(e);
            t.async = !0;
            t.src = v;
            s = b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t, s)
        }(window,
            document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');

        fbq('init', '2676192235996760');
        fbq('track', "PageView");
    </script>
    <noscript><img height="1" width="1" style="display:none"
            src="https://www.facebook.com/tr?id=2676192235996760&ev=PageView&noscript=1" /></noscript>
    <!-- End Facebook Pixel Code -->

    <!-- Google Tag Manager -->
    <script>(function (w, d, s, l, i) {
            w[l] = w[l] || []; w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            }); var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-XXXX');</script>
    <!-- End Google Tag Manager -->
</head>

<body>
    <script type="text/javascript">
        window.onload = function () {
            if (dataLayer.push({ "event": "pageLoaded" })) {
                document.location.href = "https://line.me/R/oaMessage/@line_tw_dev/?%E9%96%8B%E7%99%BC%E8%80%85%E5%AE%98%E6%96%B9%E7%A4%BE%E7%BE%A4%20https%3A%2F%2Fblog.clarence.tw%20%E6%B8%AC%E8%A9%A6%E8%A8%8A%E6%81%AF";
            } else {
                document.location.href = "https://line.me/R/oaMessage/@line_tw_dev/?%E9%96%8B%E7%99%BC%E8%80%85%E5%AE%98%E6%96%B9%E7%A4%BE%E7%BE%A4%20https%3A%2F%2Fblog.clarence.tw%20%E6%B8%AC%E8%A9%A6%E8%A8%8A%E6%81%AF";
            };
        }
    </script>

</body>

</html>

結論

如果用網頁再去執行動作其實是可以把很多東西就直接埋在網頁裡面的，不過可能會讓瀏覽的速度變慢，這部分可能需要注意一下，所以範例的網頁其實盡可能的讓網頁內容輕量化來減少使用者下載網頁的時間

參考資料

No comments yet
Facebook Pixel Google Tag Manager