Hướng dẫn cài đặt google web designer

Nếu không có mẫu nào phù hợp cho dự án quảng cáo hiển thị không thể tuỳ chỉnh của mình, bạn có thể tạo một mẫu hoàn toàn mới. Hãy tạo quảng cáo HTML5, nén quảng cáo đó thành tệp ZIP rồi tải lên.

Các định dạng quảng cáo được hỗ trợ

Hiện tại, Ads Creative Studio chỉ hỗ trợ quảng cáo hiển thị biểu ngữ HTML5 và quảng cáo biểu ngữ đa phương tiện.

Quảng cáo hiển thị biểu ngữ HTML5:

  • Được tạo bằng JavaScript, HTML và CSS
  • Có thể phân phát trên trang web hoặc trong ứng dụng di động
  • Hỗ trợ thành phần thích ứng
  • Hỗ trợ báo cáo về từng lượt thoát

Ngoài các đặc điểm ở trên, quảng cáo biểu ngữ đa phương tiện còn có các đặc điểm sau:

  • Có thể bao gồm video, âm thanh và các thành phần đa phương tiện khác
  • Hỗ trợ nhiều loại hành động tương tác, bao gồm cả thao tác di chuột và cuộn

Các điểm hạn chế

  • Hệ thống không hỗ trợ mẫu quảng cáo xen kẽ.
  • Hệ thống hỗ trợ mẫu quảng cáo mở rộng toàn màn hình, nhưng không hỗ trợ mẫu quảng cáo mở rộng sang các kích thước khác.
  • Tất cả các lượt nhấp vào quảng cáo phải sử dụng Trình cấp phép hoặc thẻ nhấp chuột. Hệ thống không hỗ trợ những lượt nhấp được mã hoá cứng bằng thẻ ký tự liên kết HTML.

Giới thiệu về Trình cấp phép

Để tải quảng cáo đa truyền thông lên Ads Creative Studio, bạn cần dùng Trình cấp phép trong các tệp của mình. Trình cấp phép là một thư viện JavaScript đóng vai trò là trung tâm liên lạc cho quảng cáo. Bạn có thể dùng nó để tải tệp từ máy chủ quảng cáo một cách an toàn khi quảng cáo của bạn đang hoạt động. Bạn cũng có thể dùng nó để ghi lại các lượt tương tác với quảng cáo của mình, qua đó biết được hiệu suất của quảng cáo.

Nếu không sử dụng Trình cấp phép, bạn nên sử dụng thẻ nhấp chuột để xác định trang đích cho mỗi lượt thoát.

Tạo quảng cáo biểu ngữ

Bạn có thể tạo quảng cáo biểu ngữ bằng cách sử dụng Google Web Designer hoặc trình chỉnh sửa HTML5 bất kỳ. Hãy chọn phương thức mà bạn muốn dùng để tìm hiểu cách:

  • Tạo quảng cáo biểu ngữ bằng Google Web Designer rồi chọn "Display & Video 360" làm phương tiện. Trình cấp phép sẽ tự động được thêm vào sau thao tác này.
  • Tự viết mã cho quảng cáo biểu ngữ bằng trình chỉnh sửa HTML5 bất kỳ.
    • Đối với quảng cáo biểu ngữ đa phương tiện, hãy làm theo hướng dẫn tạo quảng cáo biểu ngữ đa phương tiện trong Trung tâm trợ giúp Ads Creative Studio.
    • Đối với quảng cáo hiển thị biểu ngữ HTML5, hãy tìm hiểu cách trong Trung tâm trợ giúp Display & Video 360.

Sau khi các tệp của bạn hoàn tất, hãy nén các tệp đó thành một tệp ZIP, sau đó tải tệp đó lên Ads Creative Studio.

Thêm kích thước tuỳ chỉnh

Sau khi bạn tải tệp lên, Ads Creative Studio sẽ cố gắng phát hiện những kích thước mà quảng cáo của bạn hỗ trợ. Bạn cũng có thể xem trước quảng cáo của mình ở những kích thước đó. Nếu Ads Creative Studio không phát hiện được tất cả các kích thước được hỗ trợ, thì bạn có thể thêm kích thước tuỳ chỉnh vào bản xem trước.

Quảng cáo HTML5 sử dụng các tệp HTML5 được tạo trong Google Web Designer để tạo quảng cáo giàu tính tương tác, hấp dẫn. Bạn có thể thiết kế và tạo quảng cáo HTML5 cũng như nội dung web khác trong giao diện mã trực quan được tích hợp của Google Web Designer, sau đó xuất và tải các tệp lên ở định dạng .ZIP khi tạo chiến dịch trong AdMob.

Lưu ý: Nếu muốn quảng cáo một trang web hoặc ứng dụng được lưu trữ ở nơi khác, thì bạn chỉ có thể sử dụng quảng cáo HTML5.

Một số thành phần của Google Web Designer không được hỗ trợ trong AdMob.

Bắt đầu sử dụng Google Web Designer

Google Web Designer là ứng dụng web nâng cao cho phép bạn thiết kế và xây dựng quảng cáo HTML5 cũng như nội dung web khác bằng cách sử dụng giao diện mã và trực quan. Bằng cách sử dụng chế độ xem thiết kế của Google Web Designer, bạn có thể tạo nội dung bằng cách sử dụng các công cụ vẽ, văn bản và đối tượng 3D, đồng thời bạn có thể tạo các đối tượng ảnh động và sự kiện trên một dòng thời gian. Sau khi bạn tạo xong nội dung, Google Web Designer sẽ xuất ra HTML5, CSS3 và Javascript hợp lệ mà người dùng có thể đọc được.

Bạn có thể tạo quảng cáo HTML5 bằng Google Web Designer để sử dụng trong quảng cáo AdMob. Trước tiên, hãy tải Google Web Designer xuống, sau đó sử dụng hướng dẫn trong trung tâm trợ giúp Google Web Designer để tạo quảng cáo.

Tạo một quảng cáo mới từ đầu bằng cách sử dụng môi trường AdMob và sử dụng trong đó Google AdMob là nền tảng hỗ trợ.

Sáng tạo các thiết kế nền tảng HTML-5, đồ họa tương tác để chạy trên mọi thiết bị với phần mềm Google Web Designer của Google.

Hướng dẫn cài đặt google web designer
Giao diện trực quan, đa tính năng của Google Web Designer

Google Web Designer là gì?

Google Web Designer là phần mềm thiết kế web, hỗ trợ tạo banner HTML-5 và các nội dung sống động trên website.

Google Web Designer trao cho bạn công cụ và sức mạnh để sáng tạo nội dung HTML5 đẹp mắt, sinh động. Sử dụng các yếu tố ảnh động và tương tác để thiết kế website tuyệt đẹp, tích hợp liền mạch với các sản phẩm khác của Google như Google Drive, Display & Video 360 và Google Ads.

Tương tác mạnh mẽ

  • Event: Thiết lập event để tương tác sáng tạo với hành động của người dùng, bao gồm các cử chỉ vật lý như chạm, xoay hay lắc thiết bị di động. Bạn có thể dùng event tạo sẵn hoặc xây dựng từ đầu với JavaScript.
  • Các thành phần: Kéo thả các thành phần vào thiết kế để thêm nhanh các chức năng như thư viện ảnh, trình phát video, sơ đồ…
  • Trang: Tạo nhiều trang với nhiều cảnh khác nhau để mang đến trải nghiệm phong phú cho độc giả.

Linh hoạt

  • Quy trình làm việc liền mạch khi kết nối các thành tố với dữ liệu, cho phép xem trước thật trực quan.
  • Quảng cáo phản hồi: Xây dựng quy luật media riêng cho quảng cáo bằng cách thiết lập style và bố cục hợp lý, phù hợp với mọi kích thước màn hình.
    Hướng dẫn cài đặt google web designer
    Quản lý timeline dễ dàng

Hiệu ứng động

  • Tạo hoạt ảnh bằng cách xâu chuỗi nhiều cảnh riêng lẻ với nhau trong chế độ Quick mode hoặc dùng layer trên timeline trong Advanced mode.
  • Tạo nội dung 3D nhờ sức mạnh của CSS3. Xoay đối tượng và thiết kế 2D trên trục bất kỳ, chuyển đổi hình ảnh 3D và truyền tải tới người xem.

Quy trình làm việc thông minh

  • Tích hợp Google: Tận dụng ưu thế của các sản phẩm Google khác trong quá trình thiết kế banner quảng cáo. Dùng Google Fonts và nội dung từ Studio Asset Library. Sau khi hoàn thành, đăng trực tiếp lên Studio hoặc chia sẻ file trên Google Drive.
  • Thiết kế website bằng Shape hoặc Pen, sau đó thêm text và nhập nội dung khác.

Hỗ trợ nhiều định dạng

Google Web Designer hỗ trợ rất nhiều định dạng video quảng cáo và màn hình hiện có.

Hướng dẫn cài đặt google web designer
Kết nối với các sản phẩm khác của Google

Thiết kế và phát triển

Tìm kiếm công cụ cần thiết cho dù bạn là nhà thiết kế hay lập trình viên. Google Web Designer là phần mềm thiết kế đầy đủ, cho phép chỉnh sửa HTML, CSS và JavaScript trực tiếp. Chuyển giữa chế độ xem dạng Design hay Code để xem bạn đã làm được những gì.