Xuất hiện nút đặt hàng sau một thời gian nhất định (tập lệnh). Cách tăng doanh số - đặt nút bật lên bên dưới video

Xin chào các bạn. Hôm nay tôi tiếp tục chia sẻ với các bạn kịch bản hữu ích, và cụ thể hơn tôi sẽ kể cho các bạn nghe câu chuyện về sự xuất hiện của nút lên trên blog của tôi. Lâu nay được người ta nhờ viết cách làm nút tương tự, nhưng thấy tiếc vì “đốt văn phòng”, nhưng hôm nay tôi chợt đổi ý…

Chà, tôi sẽ không kể cho bạn điều gì mới, vì trên Internet, bạn có thể tìm thấy 100.500 bài viết khác về cách tạo nút quay lại cho một trang web, và đây sẽ là phần cuối của bài viết hôm nay, nếu không có một bài viết NHƯNG! Nút của tôi không bình thường, không giống nút của người khác - Tôi có một nút từ chính Yandex... bây giờ, bây giờ tôi sẽ kể cho bạn mọi thứ :)

Bằng cách nào đó, ban đầu, khi viết blog, tôi đã quyết định từ bỏ việc phân tích từng trang nhận xét trên các bài đăng. Tôi không biết tại sao, có lẽ tôi không muốn tái tạo trang phụ, hoặc có thể tôi không tin rằng mình có thể có hơn 50 bình luận cho một bài đăng, bằng cách này hay cách khác, cho đến bây giờ tôi vẫn chưa thay đổi quan điểm của mình - tất cả các bình luận về bài đăng đều được hiển thị trên một trang. Tuy nhiên, thật xui xẻo, một số bài đăng trên blog của tôi đã nhận được hơn 500 bình luận, mặc dù thực tế là tôi đã dọn dẹp chúng mỗi tháng một lần. Nói tóm lại, đây là câu chuyện nền - và kết quả là tôi phải thêm nút lên vào blog. Kết quả là, việc điều hướng qua bài viết dài với các bình luận, nó đã trở nên dễ dàng hơn nhiều.

Tôi thậm chí còn không tìm kiếm nút hoặc tập lệnh, tất cả chỉ khiến tôi chú ý - trên một trong những dịch vụ Yandex, than ôi, tôi không nhớ dịch vụ nào. Nhưng tôi đã không hề suy nghĩ kỹ về điều đó - nếu họ cho thì bạn phải nhận lấy!

Tôi thực sự thích cách diễn đạt " Nghệ sĩ giỏi họ sao chép, nhưng thiên tài thì ăn trộm,” nhưng mặc dù tôi không phải là nghệ sĩ nhưng tôi là thiên tài ăn trộm :) Đúng, nút bạn thấy trên blog của tôi đã bị đánh cắp từ Yandex. Tôi không muốn sử dụng hướng dẫn và tập lệnh của người khác, tất cả đều ngu ngốc, nhưng vì chính Yandex sử dụng tập lệnh này nên điều đó có nghĩa là nó là tập lệnh tốt nhất.

Lưu ý: đây không phải là thứ đầu tiên tôi “mượn” từ Yandex, cách đây một tháng tôi đã phát hiện ra các nút chia sẻ “bí mật” trên một trong những trang quảng cáo, trong đó có .

15 phút đào bới mã nguồn và tôi có tất cả các nguồn! Nhưng tôi sẽ cứu bạn khỏi mớ hỗn độn này, với hướng dẫn của tôi, bạn có thể có một nút đẹp và hoạt động chỉ trong 2 phút!

Cài đặt nút “quay lại đầu trang” trên bất kỳ trang web nào

Thật vậy, bạn có thể thêm tập lệnh này vào bất kỳ trang web hoặc bất kỳ CMS nào mà không gặp vấn đề gì, nhưng có chuyện gì vậy – ngay cả trên html thuần túy trang chủ. Điều kiện quan trọng nhất và duy nhất là bạn phải kết nối thư viện jQuery.

Tôi không lưu mã nguồn Yandex gốc, vì khi thêm nó vào blog, tôi đã thay đổi ngay một số kiểu và cài đặt. Nhưng tin tôi đi, mọi thứ chỉ trở nên tốt hơn trong quá trình hội nhập mà thôi!
Vì vậy, hãy bắt đầu cài đặt:

Bước 1. Thêm JavaScript vào mẫu trang web, trước thẻ đóng

< script type= "text/javascript" >$(document) .ready (function () ( $(window) .scroll (function () ( if ($(this ) .scrollTop () > 0 ) ( $("#scroller" ) .fadeIn() ; ) else ( $("#scroller" ) .fadeOut () ; ) ) ; $("#scroller" ) .click (function () ( $("body,html" ) .animate (( ScrollTop: 0 ) , 400 ) ; trả về sai ; ) ) ; ) );

$(document).ready(function())( $(window).scroll(function () (if ($(this).scrollTop() > 0) ($("#scroller").fadeIn();) else ($("#scroller").fadeOut();))); $("#scroller").click(function () ($("body,html").animate((scrollTop: 0), 400 ) ; trả về sai ;)); ));

Ví dụ: đối với WordPress, bạn sẽ cần chỉnh sửa tệp mẫu header.php và trong DLE, bạn sẽ cần thêm mã vào mẫu main.tpl.

Bước 2. Thêm mã HTML vào mẫu trang web trước thẻ đóng

hướng lên

hướng lên

Một lần nữa, trong WordPres bạn cần chỉnh sửa tệp footer.php và đối với DLE lại là main.tpl.

Bước 3. Thêm kiểu CSS cho khối và nút lên vào tệp style.css (tên tệp style.css của bạn có thể khác, nhưng không thành vấn đề, hãy thêm mã vào bất kỳ tệp kiểu nào kết nối với trang web).

.b-top ( z-index : 2600 ; vị trí : cố định ; trái : 0 ; đáy : 90px ; chiều rộng : 34% ; lề trái : 50% ; độ mờ : 0,5 ; bộ lọc : alpha(opacity= 50 ) ; ) . b-top : di chuột ( độ mờ : 1 ; bộ lọc : alpha(opacity= 100 ) ; con trỏ : con trỏ ; ) .b-top-but ( z-index : 2600 ; vị trí : tuyệt đối ; hiển thị : khối ; trái : 56px ; đáy : 0 ; lề : 0 0 0 100% ; phần đệm : 32px 12px 4px ; màu : trắng ; nền : #D8D5C2 url (http://site/wp-content/plugins/goupbutt/b-j-top.png ) không lặp lại 50% 11px ; bán kính đường viền : 7px ; )

B-top (z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);) .b -top:hover (opacity:1;filter:alpha(opacity=100);cursor:pointer;) ..png) không lặp lại 50% 11px;bán kính đường viền:7px;)

Như bạn có thể thấy, tôi thậm chí còn url Hình nền Tôi không thay đổi mũi tên, tôi vẫn tải từ máy chủ Yandex. Hình ảnh đã biến mất trên Yandex, tôi đã chỉ đường dẫn đến hình ảnh trên máy chủ của mình và tôi khuyên bạn nên lưu nó vào chính mình, nó sẽ đáng tin cậy hơn.

Những gì bạn có thể tùy chỉnh và thay đổi ở đây cho chính mình:

  • dưới cùng:90px; – phần bù của khối bằng nút so với cuối trang;
  • chiều rộng:34%;lề trái:50%; - bạn sẽ phải tưởng tượng ra những thông số này, bởi vì... Không thể có hướng dẫn rõ ràng ở đây. Tôi đã phát hiện ra những giá trị này bằng thực nghiệm, kiểm tra vị trí của nút ở các độ phân giải màn hình khác nhau dành riêng cho mẫu của tôi trên blog. Đó là những gì tôi khuyên bạn;
  • phần đệm:32px 12px 4px; — bằng cách sử dụng các giá trị này, bạn có thể điều chỉnh kích thước của khối bằng nút, điều khiển độ thụt lề so với dòng chữ “lên”. 32px – phần đệm trên cùng, 12px – phần đệm bên trái và bên phải, 4px – phần đệm dưới cùng;
  • màu trắng; - màu sắc của dòng chữ “lên”;
  • bán kính đường viền: 7px; - đây là kiểu css3 chịu trách nhiệm làm tròn các cạnh của khối.

Mọi thứ đã sẵn sàng, tôi hy vọng mình không quên điều gì. Cực kỳ đơn giản và hữu ích cho các trang web có trang rất dài.

Cảm ơn sự quan tâm của bạn, bạn bè. Sử dụng kịch bản, đặt câu hỏi trong phần nhận xét và viết đề xuất cũng như mong muốn của bạn.

Trân trọng, Alexander Alaev

Xin chào, những vị khách thân yêu của trang web của tôi! Trong bài đăng này tôi sẽ kể cho bạn nghe về một thủ thuật tiếp thị thú vị. Thủ thuật này chủ yếu sẽ phù hợp với những người bán các khóa đào tạo và khóa học bằng video giáo dục của họ.

Điểm mấu chốt. Khi một người truy cập vào một trang web bán video và nhìn thấy nút đặt hàng, anh ta sẽ đóng trang đó lại vì suy nghĩ là "ừ, họ lại đang tung ra một thứ nhảm nhí nào đó." Ai biết? Thành thật mà nói, bản thân tôi hiếm khi xem những video quảng cáo như vậy đến cuối, vì tôi nhìn thấy nút đặt hàng và tôi hiểu rằng bây giờ sẽ có một câu chuyện thành công đẹp đẽ và cuối cùng sẽ có lời đề nghị mua một loại khóa đào tạo nào đó hoặc một số “rác” khác. Mặc dù trên thực tế, đề xuất này có thể không còn là “rác rưởi”, thậm chí còn mang lại lợi nhuận rất cao cho nhiều người.

Và sau đó câu hỏi được đặt ra. Làm cách nào để buộc một người xem video đến cuối mà không đóng trang ngay vì sợ nút “đặt hàng” (mua, đăng ký) lớn màu đỏ??

Mọi thứ đều rất đơn giản! Bạn không cần hiển thị nút “đặt hàng” (mua, đăng ký) lớn màu đỏ này ngay lập tức mà hãy hiển thị nó, chẳng hạn như tại thời điểm video nói về sản phẩm của bạn. Và khi đó, người đó ít nhất sẽ không đóng trang ngay lập tức và xem video, bởi vì anh ta sẽ không biết điều gì ẩn đằng sau nó, chẳng hạn như một loại ưu đãi thương mại nào đó. Xem cách nó hoạt động trên ví dụ thực tế, nhấp chuột
by (xem kỹ đến cuối video nhé!!).

Làm thế nào nó hoạt động?

Vâng, rất đơn giản. Quảng cáo kéo dài 3 phút 10 giây, ở phút thứ hai, tại thời điểm Chúng ta đang nói về về khóa học video, một tập lệnh đơn giản được kích hoạt để hiển thị nút đặt hàng. Bạn có thể nhìn thấy tiếng kêu cót két bên dưới.

var obj = document.getElementById("link"); var timeFIG = 120; // Thời gian tính bằng giây sau khi nút xuất hiện var time = setInterval("startTimer()",1000); hàm startTimer() ( if(timerFIG !== 1) ( timeFIG--; ) else ( clearInterval(timer); obj.innerHTML = " "; // cái nút ))

< div id = "link" > < / div >

var obj = tài liệu. getElementById("link");

var timeFIG = 120 ; // Thời gian tính bằng giây sau khi nút xuất hiện

var time = setInterval ("startTimer()", 1000 );

hàm startTimer() (

if (timerFIG !== 1 ) (

bộ đếm thời gianFIG -- ;

) khác (

ClearInterval(bộ hẹn giờ);

obj. bên trongHTML = " " ; // cái nút

Xin chào các bạn đã ghé thăm blog của tôi! Vì vậy, bằng cách nào đó, mùa hè trôi qua mà không được chú ý và mùa thu đột nhiên đến với tất cả các thuộc tính của nó - mưa, ẩm ướt và lấm lem. Tất nhiên, một mặt tôi muốn sự ấm áp và nắng, nhưng mặt khác, bây giờ là lúc để tạo ra sản phẩm hoặc quảng bá các chương trình liên kết. Rốt cuộc, vào mùa thu, Internet trở nên sống động và hầu hết các doanh nhân thông tin bắt đầu công việc tích cực và doanh số bán hàng bắt đầu tăng - mọi người trở về từ biển, những ngôi nhà tranh mùa hè và lướt Internet ngày càng nhiều.

Và hôm nay tôi sẽ chia sẻ với bạn những thông tin rất hay về cách bạn có thể dễ dàng tăng cả năng lực của mình và bán hàng liên kết. Phương pháp này được gọi là nút bật lên bên dưới video.

Phương pháp này không thể gọi là mới - nó đã hơn hai năm rồi, nhưng tôi thấy nó thường được các doanh nhân thông tin nổi tiếng sử dụng, nghĩa là nó phù hợp.

Tóm lại, vẻ đẹp của nó là gì - giả sử bạn có một nhân viên bán video hoặc chỉ một trang có video trong đó bạn nói về tất cả những điều thú vị về sản phẩm hoặc dịch vụ của mình. Và ở cuối video này có một nút đặt hàng - đây là một nút cổ điển, nhưng có một tùy chọn khác - không tạo ngay nút đặt hàng để không làm khách truy cập sợ hãi mà hãy để nó xuất hiện sau một thời gian.

Ví dụ: bạn nói về tất cả những điều thú vị của khóa học mới và vào đúng thời điểm, nút đặt hàng xuất hiện bên dưới video của bạn - điều này trông thật ấn tượng và không khiến khách truy cập rời xa video của bạn quá nhiều.

Tại đây, hãy xem video hướng dẫn thiết lập nút này và áp dụng phương pháp này trên trang web của bạn - Tôi chắc chắn rằng tỷ lệ chuyển đổi sẽ cao hơn đáng kể.

Và bây giờ là phần thú vị - bạn vừa học cách chèn nút mua trên trang video. NHƯNG!

Vấn đề với phương pháp này là nút đặt hàng xuất hiện bên dưới video bất kể video đó có đang phát hay không. Tức là, một người mở trang của bạn, bắt đầu xem video và ấm đun nước của anh ấy đang sôi, anh ấy tạm dừng video, đi vào bếp và khi quay lại, anh ấy thấy nút đặt hàng đã xuất hiện dưới video. Và anh ấy thậm chí còn không nghe thấy gì và không hiểu chuyện gì đang xảy ra - vừa rồi chỉ có một đoạn video 9keak mà anh ấy nghĩ0, rồi một nút đột nhiên xuất hiện.

Và điều đáng buồn nhất là hầu hết các nhà kinh doanh thông tin đều làm đúng như vậy - họ ngu ngốc chèn một nút dưới video và không có ý đó phương pháp này mặc dù tốt nhưng nó không hoạt động xuất sắc như vậy.

Nhưng có một giải pháp cho vấn đề này!

Có một cách thứ hai, cải tiến hơn để cài đặt một nút bên dưới video và nó tốt hơn nhiều so với cách tôi vừa mô tả - đây là cài đặt một nút bên dưới video, nhưng nút này không chỉ xuất hiện trên trang web sau một thời gian nhưng được đính kèm với video.

Tức là bạn tự đặt thời gian trong video của mình mà nút sẽ xuất hiện. Và nếu video bị tạm dừng, nút này sẽ KHÔNG xuất hiện và khách truy cập sẽ không bị bối rối.

Cũng có thể đặt một số nút sẽ biến mất và xuất hiện trên một đoạn video nhất định của bạn. Ví dụ: bạn đã tổ chức một hội thảo trực tuyến và ghi lại nó, sau đó đăng nó lên blog của mình và đặt ba nút trên đó - hai nút để mua các sản phẩm khác nhau của bạn và một nút biến nó thành biểu mẫu đăng ký. Hơn nữa, mỗi nút này xuất hiện tại thời điểm bạn đang nói về một sản phẩm cụ thể - điều này sẽ rất thuận tiện nếu bạn đang trình bày một số sản phẩm của mình hoặc, chẳng hạn như liệt kê hàng hóa hoặc dịch vụ của công ty bạn và vào đúng thời điểm một nút xuất hiện để mua chính xác sản phẩm đó khoảnh khắc này có một bài phát biểu

Nhân tiện, bạn có thể đính kèm ảnh theo cách này các nút khác nhau, sẽ xuất hiện và biến mất một cách trơn tru mà không gây khó chịu cho khách truy cập, điều này ảnh hưởng rất lớn đến doanh số bán hàng.

Bạn cũng có thể cấm tua lại video đến cuối, như vậy khách truy cập vào trang của bạn sẽ không thể bỏ qua mà chỉ phải xem video đến cuối.

Và cuối cùng, tôi sẽ nói rằng bạn có thể bật tính năng tự động phát video và do đó tăng chuyển đổi doanh số bán hàng của bạn. Nói một cách dễ hiểu - đây là phương pháp tôi sử dụng và cũng giới thiệu cho bạn - bởi vì nếu chúng ta theo kịp thời đại, điều đó có nghĩa là chúng ta sẽ thắng so với những người không sử dụng tự động hóa hoặc sử dụng nó kém.

Tôi hy vọng bạn thấy bài viết này hữu ích và bạn sẽ có thêm doanh thu thông qua phương pháp này.


Nhận danh sách kiểm tra để thiết lập bán hàng tự động!