Chắc rất nhiều bạn download đã gặp qua trường hợp khi tải Photoshop hoặc 1 phần mềm nổi tiếng trên mạng thường kèm 1 file .txt hướng dẫn để lấy pass mở khóa file giải nén, pass mở khóa file giải nén chỉ hiển thị khi người dùng search 1 từ khóa và click vào bài viết kéo xuống tìm mã.
1. Giới thiệu sơ qua về việc thêm button:
* Hướng dẫn này đi theo hướng tương tự như trên, lợi ích:
- Button có thời gian chờ giúp time-on-site của người dùng trên website của bạn lâu hơn.
- Button chỉ hiển thị khi người dùng tìm từ khóa từ Google nhằm loại bỏ người dùng direct link.
* Thử nghiệm demo để ae dễ hình dung:
Trong demo này mình sẽ test 2 gạch đầu dòng dưới đây:
- Tìm từ khóa “share cookies Netflix” trên Google. Nhấn vào sẽ hiện button đếm ngược.
- Nếu từ sharengay.com nhấn thẳng vào bài viết hoặc nhấn vào link đã bookmark sẽ không hiện cho dù trước đó người dùng lấy link truy cập từ Google.
Video demo:
* Demo 2 case button được dùng trong trường hợp:
- Như đã nói ở trên, nó chỉ hiển thị khi người dùng tìm trên Google, do đó có thể bổ sung cho đoạn đầu tiên mình nói trong bài viết này. Lọc người dùng từ Google Search.
- Thực tế sharengay: mình có tạo bài viết share cookies Netflix, link tới bài cookies có đặt pass nhưng thường xuyên bị người nước ngoài phá. Nên mình tạo button trên gắn đến bài viết muốn SEO.
- Có rất nhiều cách có thể áp dụng, ae có thể tùy biến cho trường hợp của mình….
* Ví dụ case thực tế từ website sharengay:
Bài viết share cookies link tới bài viết bán tài khoản Netflix, vừa giúp tăng traffic cho bài bán Netflix (bài share cookies hơn 1k view / 1 ngày), vừa tăng thời gian ở lại trên bài viết lâu – tiêu chí giúp Google đánh giá và xếp hạng bài viết thay vì ae chỉ tìm đúng pass vào copy rồi thoát ra ngay.
* Các bạn có thể xem ảnh bên dưới mình capture 1 đoạn trong bài viết.
Ưu điểm cách như hình là tiện, chỉ việc sửa bài viết. Nhược điểm là không biết ae có tìm trên Google không và thời gian ở lại trang gần như siêu ngắn. Nên bổ sung thêm button trên sẽ khắc phục được.
2. Thêm button và các thông số cần lưu ý khi setup:
Bước 1: thêm mã HTML vào bài viết:
* Hướng dẫn bằng ảnh kèm chú thích:
* Đoạn mã thêm vào:
<div id="references40" code-ref="ref51" countdown="8" style="text-align: center; font-weight: 600;"> BUTTON CHỈ HIỆN MẬT KHẨU KHI TÌM TỪ KHÓA "SHARE COOKIES NETFLIX" TRÊN GOOGLE </div>với:
- Giá trị
code-reflà các khóa (mã bí mật) bạn muốn chèn khi người dùng click vào nó sẽ hiện ra. Các khóa này được lưu trong biếnstoresbên dưới đoạn mã Javascript (mình sẽ embed trong bài viết). Khóa này có thể là chữ, số được phép có khoảng trắng. - Giá trị
countdownlà số giây bạn muốn người dùng đợi. Mình hay set ngắn khoảng 20s thôi vì để lâu người dùng bực mình. - Chỗ nội dung bên trong div có id=”references40″ ở trên là tùy biến, mình chỉ ghi 1 câu ngắn gọn “BUTTON CHỈ HIỆN MẬT KHẨU….” để điều hướng người dùng, các bạn có thể tạo 1 thông báo đẹp đẽ nào đó hoặc chèn HTML thêm vào và style theo ý, chỉ khi người dùng tìm kiếm từ Google nó sẽ tự append button và xóa đi toàn bộ HTML đang có trong div có id=”references40″. Ae tùy biến theo ý mình là được.
Bước 2: thêm mã Javascript để tự động append button vào đoạn HTML có id là references40 vào bài viết:
* Đây là JS hoàn chỉnh (các bạn cuộn xuống để xem):
* Mình sẽ giải thích sơ qua các biến cần lưu ý trên file JS trên:
ifm_list_browser: các bạn có thể add thêm các công cụ tìm kiếm như Bing, Cốc Cốc,… các bạn cũng có thể mở rộng ra link từ 1 trang nào đó như Facebook, website của bạn bè, website bất kỳ click vào mới hiện ra phần tử đó chứ không gói gọn trong Google.stores: mảng này chứa cặp key-value tương ứng với trườngcode-ref="ref51"trên đoạn HTML ở bước 1,keycóref51tương ứng vớivaluelà343596. Value các bạn có thể để là text có khoảng trắng bất kỳ đều được.- Các bạn cũng có thể style css button theo ý thích, style demo ở trên có thể dùng ngon trên Desktop và Mobile.
* JS này chèn ở đâu?
Cá nhân mình chỉ dùng cho 1 số bài viết đặc biệt nên mình chèn trực tiếp vào bài viết luôn. Cần lưu ý site bạn phải có jQuery vì trong đoạn JS trên có sử dụng jQuery.
Cần nói thêm, vì mình dùng WordPress nên hướng dẫn này + hình ảnh đi kèm là WordPress, tuy nhiên mã trên dùng cho mọi nền tảng vì chỉ là HTML + JS. Hướng dẫn khá dài dòng, tuy nhiên mình đã cố gắng cho đơn giản và dễ hiểu nhất có thể để tất cả ae đều làm được. Mong ae thông cảm nếu có điều gì sai sót hoặc góp ý có thể comment bên dưới bài viết này, mình sẽ sửa đổi và tiếp thu. Cảm ơn anh em.
OK, bài viết đã kết thúc. Chúc anh em làm được.
