Media Banners

Hướng Dẫn Triển Khai Banner

Một banner thú vị và tương tác, cho phép người dùng vuốt để lộ nội dung ẩn bên dưới lớp che phủ. Banner này có thể được lưu trữ trên nền tảng quảng cáo của Google hoặc các nền tảng khác.

Triển khai trên nền tảng không phải Google:

Tích hợp Banner

• Nhúng banner Scratch to Reveal bằng đoạn mã <iframe> sau:

  <iframe
   src="https://yourdomain.com/path-to-banner/ScratchToReveal.html"
   style="border: none;"
   width="300"
   height="600">
  </iframe>
                      

Tính Năng Nổi Bật

• Hiệu ứng vuốt để lộ nội dung - Tạo sự tò mò và kích thích tương tác từ người dùng.
• Phù hợp cho chiến dịch khuyến mãi hoặc nội dung bí ẩn - Hoàn hảo cho các chương trình giảm giá hoặc quà tặng bất ngờ.
• Thiết kế responsive - Hoạt động mượt mà trên cả mobile và desktop.

Lưu Ý

• Đảm bảo hình ảnh lớp trên và lớp dưới được căn chỉnh chính xác để hiển thị mượt mà.
• Kiểm tra chức năng vuốt trên nhiều thiết bị để đảm bảo khả năng tương thích.

Vì Sao Chọn Banner Scratch to Reveal?

Banner Scratch to Reveal mang lại trải nghiệm tương tác độc đáo, giúp tăng sự hứng thú và thu hút người dùng, lý tưởng cho các sự kiện khuyến mãi hoặc chiến dịch marketing sáng tạo.

Hướng Dẫn Triển Khai Banner

Banner này hiển thị hiệu ứng so sánh Before & After (Trước & Sau) động. Người dùng có thể kéo chuột hoặc vuốt trên thiết bị di động để so sánh hai hình ảnh một cách mượt mà. Banner này có thể được lưu trữ trên nền tảng quảng cáo của Google hoặc các nền tảng khác.

Triển khai trên nền tảng không phải Google:

Tích hợp Banner

• Nhúng banner Before & After bằng đoạn mã <iframe> sau:

  <iframe
   src="https://yourdomain.com/path-to-banner/BeforeAfter.html"
   style="border: none;"
   width="300"
   height="250">
  </iframe>
                      

Tính Năng Nổi Bật

• Hiệu ứng kéo và vuốt để so sánh hai hình ảnh - Cung cấp trải nghiệm trực quan và hấp dẫn.
• Lý tưởng cho việc so sánh hình ảnh - Hoàn hảo để hiển thị quá trình thay đổi sản phẩm, cải tiến dịch vụ, hoặc trước và sau khi sử dụng sản phẩm.
• Thiết kế responsive - Hoạt động tốt trên cả thiết bị di động và máy tính.

Lưu Ý

• Đảm bảo chất lượng hình ảnh tốt để hiệu ứng so sánh đạt hiệu quả cao nhất.
• Kiểm tra chức năng vuốt trên thiết bị di động để đảm bảo trải nghiệm mượt mà.

Vì Sao Chọn Banner Before & After?

Banner Before & After mang lại cách tiếp cận trực quan và tương tác cao, giúp minh họa sự thay đổi một cách rõ ràng, phù hợp cho các chiến dịch giới thiệu sản phẩm hoặc dịch vụ yêu cầu so sánh hình ảnh.

Hướng Dẫn Triển Khai Banner

Banner video tích hợp hỗ trợ cả video MP4 được lưu trữ trên máy chủ và URL từ YouTube, mang lại sự linh hoạt trong cách trình bày nội dung. Banner này có thể được triển khai trên nền tảng quảng cáo của Google hoặc các nền tảng khác.

Triển khai trên nền tảng không phải Google:

Tích hợp Banner

• Nhúng banner In-Page Video bằng đoạn mã <iframe> sau:

  <iframe
   src="https://yourdomain.com/path-to-banner/InPageVideo.html"
   style="border: none;"
   width="300"
   height="600">
  </iframe>
                      

Tính Năng Nổi Bật

• Hỗ trợ tự động phát (autoplay), điều khiển phát/tạm dừng (play/pause) và thiết kế thân thiện với thiết bị di động.
• Tương thích với cả video được lưu trữ trên máy chủ và URL từ YouTube.
• Triển khai gọn nhẹ, không yêu cầu thêm bất kỳ tập lệnh (script) bổ sung nào.

Lưu Ý

• Đảm bảo định dạng video tuân thủ yêu cầu của nền tảng lưu trữ (ví dụ: MP4).
• URL YouTube phải hợp lệ và được nhúng đúng cách.

Vì Sao Chọn Banner In-Page Video?

Banner In-Page Video mang đến cách truyền tải nội dung sinh động qua phương tiện đa phương tiện, giúp tăng mức độ tương tác và thu hút người dùng thông qua hình thức kể chuyện bằng hình ảnh.

Hướng Dẫn Triển Khai Banner

Banner hiển thị bộ sưu tập hình ảnh với hiệu ứng chuyển đổi mượt mà và điều khiển phân trang. Banner này có thể được triển khai trên nền tảng quảng cáo của Google hoặc các nền tảng khác.

Triển khai trên nền tảng không phải Google:

Tích hợp Banner

• Nhúng banner Gallery với Hiệu Ứng Chuyển Đổi bằng đoạn mã <iframe> sau:

  <iframe
   src="https://yourdomain.com/path-to-banner/GalleryWTransition.html"
   style="border: none;"
   width="300"
   height="250">
  </iframe>
                      

Tính Năng Nổi Bật

• Chuyển đổi hình ảnh tự động giữa các khung ảnh.
• Dấu phân trang giúp người dùng dễ dàng điều hướng thủ công.
• Hiệu ứng chuyển đổi tùy chỉnh, linh hoạt theo thiết kế mong muốn.

Lưu Ý

• Sử dụng hình ảnh chất lượng cao để đảm bảo hiển thị chuyên nghiệp.
• Kiểm tra chế độ tự động phát (auto-play) để đảm bảo trải nghiệm mượt mà.

Vì Sao Chọn Banner Gallery với Hiệu Ứng Chuyển Đổi?

Banner Gallery với Hiệu Ứng Chuyển Đổi lý tưởng để hiển thị nhiều hình ảnh trong bố cục hiện đại và tinh tế, tạo trải nghiệm thu hút và chuyên nghiệp cho người dùng.

Hướng Dẫn Triển Khai Banner Parallax

Banner Parallax mang lại trải nghiệm cuộn trang mượt mà, tạo hiệu ứng hình ảnh sinh động khi người dùng cuộn trang. Đây là một giải pháp tuyệt vời để nâng cao tính tương tác và thu hút sự chú ý. Banner này có thể được triển khai trên các nền tảng không phải Google bằng cách sử dụng tệp JavaScript tùy chỉnh (dic.js) để xử lý hiệu ứng parallax và nhúng iframe.

Các Bước Triển Khai trên Nền Tảng Không Phải Google

Để tích hợp banner Parallax vào trang web của bạn, hãy làm theo các bước sau:

1. Thêm Tệp JavaScript

• Chèn đoạn <script> sau vào <head> của trang web nơi banner sẽ được nhúng:

  <script src="https://dicom-interactive.com/banners/dic.js"></script>

• Hoặc bạn có thể lưu trữ dic.js cùng thư mục với các tệp banner Parallax và cập nhật đường dẫn src tương ứng.

2. Nhúng Banner Parallax

• Thêm container cuộn (<div>) và iframe vào trang web của bạn:

      <div id="scrollableElement">
          <iframe
              id="myParallaxIframe"
              class="dic dic-parallax"
              scroller="#scrollableElement"
              scrolling="no"
              src="https://yourdomain.com/path-to-banner/banner.html"
              style="border: none;"
              width="300"
              height="250">
          </iframe>
      </div>
                      

• Giải Thích Các Thuộc Tính Quan Trọng:
  
  • scroller=“#scrollableElement”: Liên kết iframe với phần tử cuộn được chỉ định để đảm bảo hiệu ứng parallax đồng bộ.
  • scrolling=“no”: Ngăn chặn iframe hiển thị thanh cuộn riêng.

Tính Năng Nổi Bật

• Cuộn Tương Tác: Banner Parallax phản ứng linh hoạt theo thao tác cuộn trang của người dùng, tạo hiệu ứng cuốn hút.
• Tùy Chỉnh Scroll Container: Bạn có thể chỉ định bất kỳ phần tử cuộn nào để kiểm soát hiệu ứng parallax.
• Tích Hợp Dễ Dàng: Chỉ cần thêm tệp dic.js và một cấu trúc iframe đơn giản, không cần cấu hình phức tạp.

Lưu Ý

1. Chiều rộng và chiều cao của iframe phải khớp với kích thước banner.
2. Đường dẫn src trong <iframe> phải trỏ đến đúng tệp HTML của banner trên nền tảng lưu trữ của bạn.
3. Container cuộn (#scrollableElement) cần có kích thước và kiểu phù hợp để cho phép cuộn trang:

       #scrollableElement {
           height: 100vh; /* Chiều cao toàn màn hình */
           overflow-y: scroll; /* Cho phép cuộn dọc */
       }
                       

Vì Sao Nên Chọn Banner Parallax?

• Tăng Tương Tác: Banner Parallax giúp thu hút sự chú ý của người dùng và nâng cao trải nghiệm duyệt web.
• Linh Hoạt Trong Triển Khai: Có thể triển khai trên các nền tảng không phải Google nhưng vẫn giữ nguyên tính năng như các banner Google-hosted
• Tích Hợp Nhẹ Nhàng: Sử dụng tệp dic.js giúp triển khai nhanh chóng và hiệu quả.

Hướng Dẫn Tích Hợp Banner Mở Rộng

Các banner mở rộng của chúng tôi có tính linh hoạt cao và có thể được lưu trữ trên cả nền tảng quảng cáo của Google (Google Ads, DV360) cũng như các nền tảng lưu trữ khác. Dưới đây là hướng dẫn chi tiết để tích hợp banner mở rộng trên các nền tảng không thuộc Google, bao gồm cách thiết lập với tệp JavaScript tùy chỉnh.

Lưu Trữ Trên Các Nền Tảng Không Thuộc Google

Để lưu trữ banner mở rộng trên nền tảng không thuộc Google, chúng tôi cung cấp một tệp JavaScript nhẹ (dic.js) giúp xử lý mở rộng/thu gọn một cách linh hoạt. Tệp này cho phép banner mở rộng hoạt động đúng theo thiết kế mà vẫn đảm bảo trải nghiệm mượt mà và tương thích trên nhiều thiết bị.

Các Bước Tích Hợp Trên Nền Tảng Không Thuộc Google

1. Thêm Tệp JavaScript

• Thêm đoạn mã sau vào thẻ <head> trên trang web nơi bạn muốn hiển thị banner:

  <script src="https://dicom-interactive.com/banners/dic.js"></script>

• Hoặc bạn có thể lưu trữ dic.js cùng thư mục với các tệp banner mở rộng và cập nhật đường dẫn src cho phù hợp.

2. Nhúng Banner Mở Rộng

Chèn đoạn mã iframe dưới đây vào trang web để hiển thị banner mở rộng:

<iframe
    id="myExpandableIframe"
    class="dic dic-expandable"
    src="https://yourdomain.com/path-to-banner/banner.html"
    style="border: none;"
    width="320"
    height="50">
</iframe>
            

Tính Năng Nổi Bật

• Tự động thay đổi kích thước: dic.js tự động điều chỉnh kích thước iframe khi người dùng tương tác với banner, đảm bảo banner mở rộng hiển thị đúng cách và thu gọn khi cần.
• Linh Hoạt: Banner có thể được tích hợp vào bất kỳ nền tảng nào mà vẫn duy trì chức năng mở rộng/thu gọn như trên các nền tảng của Google.
• Dễ dàng triển khai:: Chỉ cần thêm tệp JavaScript và nhúng mã iframe mà không cần cấu hình phức tạp.

Lưu Ý

• Đảm bảo đường dẫn src của iframe trỏ đúng đến tệp HTML của banner trên nền tảng lưu trữ của bạn.
• Kích thước ban đầu của banner trong thẻ <iframe> phải khớp với kích thước của trạng thái thu gọn (ví dụ: 320x50).
• Tệp dic.js có thể được lưu trữ tại đường dẫn mặc định https://dicom-interactive.com/banners/dic.js hoặc cùng thư mục với các tệp banner mở rộng.