---
# System prepended metadata

title: 資傳_網頁設計概論TA教學_line 行銷_12
tags: [網頁設計概論, 第十二週]

---

#  資傳_網頁設計概論TA教學_line 行銷_12


## 目錄
[TOC]
## MARTECH
什麼是 **MARTECH** ?

MARTECH「行銷科技」是**行銷結合科技**的新名詞，是由「**Marketing**」與「**Technology**」結合而成，中文意思為行銷科技，可以簡單理解成「**將科技技術導入行銷策略**」的趨勢。

**優勢:**
* 簡化與自動化的行銷流程
* 有助於蒐集、分析數據
* 提升目標客戶在消費歷程的豐富性、趣味度、及便利性

[--延伸學習](https://www.migocorp.com/pages/blog/Martech%E6%98%AF%E4%BB%80%E9%BA%BC)

---
## LINE 官方帳號 ( LINE OA )
line在台灣的用戶數非常的高，因此如果企業使用line來行銷商品將有可能增加商品的行銷數量，接下來我將使用line來做簡單的行銷。

(可以結合前幾次教學的網頁一起，像是[星巴克的官網](https://www.starbucks.com.tw/home/index.jspx?r=61)一樣)
![](https://i.imgur.com/jJuKVnY.jpg)

line的官方帳號的盾牌分為3種顏色，一般大多數是白色(自己開發也是)，藍色則是認證的官方帳號(須具備專屬ID)、最後是綠色的部分。[--官方網址](https://tw.linebiz.com/service/account-solutions/line-official-account/)

![](https://i.imgur.com/31EgmsK.jpg)

## 創建官方照號
1. 先在網路上搜尋line developers，並點選右上方的log in
![](https://i.imgur.com/zBZ32zY.jpg)
![](https://i.imgur.com/kuipbYW.jpg)
2. 第一次創建，可以使用自己的line帳號登入進行開發
![](https://i.imgur.com/AVei5bI.jpg)
3. 登入後，create a new provider(並輸入名稱)
![](https://i.imgur.com/C0zvxbo.jpg)
![](https://i.imgur.com/hkwZstd.jpg)
4.  點選create message api channel
![](https://i.imgur.com/DOVRlm7.jpg)
5. 接著依需求填入帳號所需的資料(國家、使用用途、名稱等等)
![](https://i.imgur.com/Q2DS0LH.jpg)
![](https://i.imgur.com/PVNXscG.jpg)
![](https://i.imgur.com/w5oNZmt.jpg)
![](https://i.imgur.com/VxVX037.jpg)
6. 完成後將可以看到自己的官方帳號等資訊，接著點選messaging api，在這裡，你可以看到該帳號的qrcode、id等等資料
![](https://i.imgur.com/gGIVbTC.jpg)
![](https://i.imgur.com/Jy3NWap.jpg)
7. 再來是statistics(統計數據)，你可以從這裡看到訊息的傳了多少
![](https://i.imgur.com/6HiMckG.jpg)
![](https://i.imgur.com/Os9gEM1.jpg)
這裡是line的訊息標準，如果是免費用戶的話，大約是 **一個月500則訊息**
![](https://i.imgur.com/iDUjLbL.jpg)
:::info
到這裡基本上line的官方帳號就已經創建完成了，接下來是建立帳號裡面的資料。
:::
剛剛步驟完成後，掃描加入qrcode後會顯示下面的樣子:
![](https://i.imgur.com/J1alc3G.jpg)

---


## 帳號的介面
當我們加入大多數的line官方帳號時，我們會發現到說他們會有很多區塊(像是下方圖文訊息、圖文訊息回覆等等)，來讓使用者更為直覺的點選常見的問題等等。
![](https://i.imgur.com/dgXDDBq.jpg)
(此圖為趨勢科技防詐達人的官方帳號)


---

**讓我們開始自己製作八**
1. 首先在網路上搜尋"line official account"
![](https://i.imgur.com/VOUIIZS.jpg)
剛剛假使line developers並未登出，那麼點選後將會看到下面那個畫面，並點選剛剛所創建的
![](https://i.imgur.com/D4IF5Yg.jpg)

2. 介面介紹(左邊是可以操作的項目)
![](https://i.imgur.com/VXyATnd.jpg)
---

### 加入帳號的歡迎訊息
點選左側的聊天室相關，選擇加入好友的訊息
![](https://i.imgur.com/lqDRVDT.jpg)
下面的訊息是預設的，這裡會發現無法加入圖片、影片等等
![](https://i.imgur.com/DR710BT.jpg)
因此，我們必須刪除舊的(預設的歡迎訊息)，並且點選下方的新增，這樣一來即可新增圖片等等資訊進歡迎訊息中，不妨嘗試把QRcode分享給同學試試。

![](https://i.imgur.com/6BuKFma.jpg)

---

### 官方帳號的圖文選單
點選左側的聊天室相關，再來點選圖文選單開始進行建立
![](https://i.imgur.com/iaNyTK9.jpg)
![](https://i.imgur.com/a9oqmtJ.jpg)
輸入標題(使用者不會顯示)、選單列顯示文字(如下圖所示)
![](https://i.imgur.com/EMhwM7N.jpg)
再來選擇帳號要使用的版型，示範是使用小型3格
![](https://i.imgur.com/LGIj298.jpg)

接著是讓下方出現圖片的方法有2種 :
1. 上傳圖文選單的圖片，要依上傳的圖片格式來放入，太大或太小建議使用ps進行影像尺寸的編輯
2. 使用它內建的功能(建立圖片)進行簡單的編輯
![](https://i.imgur.com/VTPHnos.jpg)

接著是點選後，A、B、C各自會執行的動作(像是發送優惠卷、外部連結、確認狀態等等)
![](https://i.imgur.com/0ujofyB.jpg)
最後是顯示設定的部分，
1. **標題**(使用者不會看到)
1. **使用時間**(結束後選單會消失)
1. **預設方式**(顯示的話打開帳號即會立即出現、隱藏則是要讓使用者自行打開才會顯示)
![](https://i.imgur.com/S0RMe37.jpg)

恭喜你完成了，重新打開官方帳號，即可看到自己的帳號下方會顯示圖文選單摟!!

---

### 圖文選單延伸(透過不跳轉的方式，開啟網頁)
你是否曾看過開啟line的網頁，而不用跳出Line的應用程式?line有提供一種，不跳轉出line應用程式就能開啟網頁的方式(如下圖所示)。
![](https://i.imgur.com/aYkRbT0.jpg)
讓我們現在實作一下吧
1. **首先回到line developer，並新增一個line login**
![](https://i.imgur.com/vBhUKph.jpg)
2. **並根據要求添加資料、名稱**
![](https://i.imgur.com/Lxw2KDR.jpg)
3. **icon的部分可以不用丟沒關系，因為這部分不會顯示**
![](https://i.imgur.com/5rJJCKk.jpg)
3. **app type的部分請全部進行勾選**
![](https://i.imgur.com/W2QSCb6.jpg)
3. **url的部分暫時可以不用填寫，後續如果需要可以進行填寫**
![](https://i.imgur.com/YHdtnJk.jpg)
4. 完成填寫按新增(應該會發現到頻道多一個)
![](https://i.imgur.com/A8Tjm5v.jpg)
5. 進入剛剛所創立的頻道，並點選Liff
![](https://i.imgur.com/fn3wBNz.jpg)
6. 並新增一個LIFF(並依指示填寫相關資料)
![](https://i.imgur.com/8W7v7Vh.jpg)
**這部分是你想怎麼將畫面呈現(full=100 / tall=70 /compact=50)**
![](https://i.imgur.com/mAlpO3H.jpg)
**這部分是你想呈現的網址**
![](https://i.imgur.com/yPMPsf6.jpg)
**這部分我尚未了解，後續了解後會補上(目前先按下面圖示所勾選)**
![](https://i.imgur.com/MRsRvlc.jpg)
7. 添加完成後，複製LIFF URL並去line official account中的圖文選單中貼上，即可完成上一開始的效果。


---

### 對話用圖文訊息
首先點選左邊的訊息項目，接著點選圖文訊息右邊的建立按鈕
![](https://i.imgur.com/sI2NJXB.jpg)
![](https://i.imgur.com/mywda4Q.jpg)
再來根據條件填入資料完成後，即可顯示資訊(可參考下圖)
![](https://i.imgur.com/J7sPSMA.jpg)

---

### 設定多頁訊息
點選旁邊的訊息項目，並選擇多頁訊息的部分，一樣地將基本資料填入
![](https://i.imgur.com/IsZxJkH.jpg)
![](https://i.imgur.com/WLBbZSy.jpg)
1. 可以選擇樣式(可依自己的需求進行選擇，像是可以是商品導向的等等)
![](https://i.imgur.com/Gcv7kkl.jpg)
2. 填入想要傳遞的內容
![](https://i.imgur.com/TFMezbg.jpg)
3. 如果分頁不夠多時，可以透過右邊的新增按鈕增加分頁(建議別太多個，不然使用者不會想繼續向右邊滑動)
![](https://i.imgur.com/46cmyVq.jpg)
4. 一定要將下面的結尾頁資料填入，上面分頁資料的最後一頁不會當作結尾頁喔!!
![](https://i.imgur.com/A8W9ylA.jpg)

完成後，可參考下圖所示:
![](https://i.imgur.com/XNrpXBT.jpg)


---
### 設定關鍵字回覆
關鍵字的回覆，通常會設定為使用者常輸入的文字(像是問題回報等等)，官方帳號透過設定關鍵字，就可以不需要有額外的人力進行訊息的回覆
1. 點選旁邊選單的自動回應
![](https://i.imgur.com/suHbkvy.jpg)
2. 再來新增一個自動回應訊息(並輸入必要之內容與設定關鍵字觸發)
![](https://i.imgur.com/w4i6SxL.jpg)
3. 接著點選右邊的設定
![](https://i.imgur.com/VltDdds.jpg)
4. 點選設定中的回應設定(並修改基本設定中的模式為聊天機器人)
![](https://i.imgur.com/UUV3TmB.jpg)
![](https://i.imgur.com/p5lMdYK.jpg)
5. 最後將自動回應訊息開啟(即可完成關鍵字回應的設定)
![](https://i.imgur.com/xdWaShI.jpg)

**注意每個月只有500則的訊息用量喔!!詳細起看上方的訊息收費那**

---

### 優惠卷使用與發放

1. 先點選推廣相關下面的優惠卷
![](https://i.imgur.com/jea6bnV.jpg)
![](https://i.imgur.com/HsZfhuO.jpg)
2. 再來根據資料填入
![](https://i.imgur.com/BdF9Ewi.jpg)
**進階設定的部分看自己是否進行修改(可以改成抽獎卷的方式)**
![](https://i.imgur.com/FFye6L4.jpg)

---

### 集點卡

集點卡和優惠卷算是行銷手段的一種，因此這部分在生活中可能常常遇見
![](https://i.imgur.com/kF81QRa.jpg)
1. 填入必要資料，並根據集點後給予優惠卷等等獎勵
![](https://i.imgur.com/EQ39iWp.jpg)
2. 如果沒有優惠卷，那麼就點選下方進行建立
![](https://i.imgur.com/3V86Fe9.jpg)
![](https://i.imgur.com/1R1ARgM.jpg)
3. 選擇集點卡發放的樣式，可以直接是qrcode，也可以是qrcode直接讓使用者掃描後增加點數
![](https://i.imgur.com/VMp0gry.jpg)
![](https://i.imgur.com/U4eCWkZ.jpg)
![](https://i.imgur.com/F1uHEeT.png)

4. 可以透過設定，讓使用者加入好友之後直接給予1點的集點卡點數喔
**在集點卡設定中，下面有一項是只要掃到該集點卡，就會自動給予1點**
![](https://i.imgur.com/H8jrN0E.jpg)


---

### line官方好友招募海報生成

你是否有看過line的加入好友的海報?line官方帳號有快速生成海報的地方(也可以自己設計喔)
1. 首先點選增加好友人數中的加入好友指南
![](https://i.imgur.com/Mupp1OM.jpg)
2. 接著點選在店裡宣傳，並且選擇下載海報，這樣就能直接得到免費海報進行宣傳
![](https://i.imgur.com/NrVrCVH.jpg)
![](https://i.imgur.com/lZydcPv.jpg)


---


## 自學資源
[line developers doc](https://developers.line.biz/en/docs/)
[line 官方學習中心](https://www.youtube.com/watch?v=DDYnA7ngJF4&list=PLzjkntiQCKtDVz_3-TLRfTnTAJQdz81M9&index=1)

## QA

## 實際練習看看
創建一個line的官方帳號，讓它下方有一個圖文選單，並且設定一個關鍵字進行回覆
![](https://i.imgur.com/TXZHgLE.jpg)

:::info
**line行銷  有太多東西沒辦法介紹到，因此如果有想做的可以留言，讓我知道，我可以補上，或者是自我學習喔(比較建議是這個)**
:::


###### tags: `網頁設計概論` `第十二週`