Các thẻ cơ bản trong html

 

How to Use Google AdSense Ads on Responsive Websites

Google AdSense has officially approved Responsive Design and what that means is you can serve Google ads of varying dimensions corresponding to the viewport size (screen resolution) of the visitor’s device.

For instance, if a visitor is reading your web page on desktop, you can choose to serve the large 728×90 (leaderboard) unit but if another visitor is viewing the same web page on a mobile phone, you can display the smaller 468×60 ad unit. The AdSense code detects the size of the visitor’s screen and serves the appropriate ad unit that will best fit the available space.

You can serve responsive Google AdSense ads in both synchronous as well as asynchronous (non-blocking) fashion. The latter is a more efficient and recommended method as the JavaScript ad code loads in parallel and therefore does not block the other elements of the web page from rendering. In other words, your pages will load faster improving user experience.

How to Generate Responsive AdSense Ads

Open your AdSense dashboard and under My Ads, click “Create new ad unit.” Set Ad Size as “Responsive Ad Unit” and click the “Save and Get Code” button to generate the JavaScript code for your Responsive AdSense ad. The default code is something like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-12345"
     data-ad-slot="xxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

AdSense computes the available width and renders the largest ad that will fit that space. This may not always be the most appropriate approach since the best performing ads are rectangles and skyscrapers and not necessarily the leaderboards.

There is however an option to force the ad unit to always serve the rectangle or the skyscraper. You can change the value of the data-ad-format variable in the JavaScript code from “auto” to “rectangle” and it will always serve one of the rectangular formats. Similarly, you can set data-ad-format to “vertical” to always render a 120×600 or 160×600 rectangle. The modified ad code would be:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-12345"
     data-ad-slot="xxxxx"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Responsive AdSense Ads (Another Approach)

Whether you set data-ad-format as “auto” or “vertical” or “horizontal” or vertical, the Google AdSense algorithms will still decide which ad to serve. For instance, if you ask for an rectangle, you may either get a medium rectangle or a large rectangle.

Should you wish to force AdSense to serve ads of a particular size while staying responsive, you can consider custom-sized ads. The size of these ads is determined based on the screen but the publisher has more control over the banner size that is served.

<div id="google-ads-1"></div>

<script type="text/javascript">

    /* Calculate the width of available ad space */
    ad = document.getElementById('google-ads-1');

    if (ad.getBoundingClientRect().width) {
        adWidth = ad.getBoundingClientRect().width; // for modern browsers
    } else {
        adWidth = ad.offsetWidth; // for old IE
    }

    /* Replace ca-pub-XXX with your AdSense Publisher ID */
    google_ad_client = "ca-pub-XXX";

    /* Replace 1234567890 with the AdSense Ad Slot ID */
    google_ad_slot = "1234567890";
 
    /* Do not change anything after this line */
    if ( adWidth >= 728 )
      google_ad_size = ["728", "90"];  /* Leaderboard 728x90 */
    else if ( adWidth >= 468 )
      google_ad_size = ["468", "60"];  /* Banner (468 x 60) */
    else if ( adWidth >= 336 )
      google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
    else if ( adWidth >= 300 )
      google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
    else if ( adWidth >= 250 )
      google_ad_size = ["250", "250"]; /* Square (250 x 250) */
    else if ( adWidth >= 200 )
      google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
    else if ( adWidth >= 180 )
      google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
    else
      google_ad_size = ["125", "125"]; /* Button (125 x 125) */

    document.write (
     '<ins class="adsbygoogle" style="display:inline-block;width:'
      + google_ad_size[0] + 'px;height:'
      + google_ad_size[1] + 'px" data-ad-client="'
      + google_ad_client + '" data-ad-slot="'
      + google_ad_slot + '"></ins>'
    );
 
    (adsbygoogle = window.adsbygoogle || []).push({});

</script>

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

Go to your AdSense dashboard and either create a new ad unit or use one of your existing ad units. Make a note of the ID of your ad unit and also your AdSense Publisher ID and paste these values in Line #15 and #18.

Next, copy-paste the above snippet anywhere on your web page and, based on the size of the user’s device, the most appropriate AdSense Ad will be served. If you wish to include multiple responsive AdSense ad units on the same web page, just use the same snippet of code but increment the DIV ID in lines #1 & #6 such that they become google-ads-1, google-ads-2 and so on.

Source: hungtq.com

Bắt đầu với HTML & Javascript

Ngôn ngữ đánh dấu siêu văn bản chỉ rõ một trang Web được hiển thị như thế nào trong một trình duyệt.

Sử dụng các thẻ và các phần tử HTML, bạn có thể:
    • Điều khiển hình thức và nội dung của trang.
    • Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu HTML.
    • Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch…
    • Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX và các Java Applet vào tài liệu HTML.
Tài liệu HTML tạo thành mã nguồn của trang Web. Khi được xem trên trình soạn thảo, tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định trang Web hiển thị như thế nào. Trình duyệt đọc các file có đuôi .htm hay .html và hiển thị trang Web đó theo các lệnh có trong đó. Ví dụ, theo cú pháp HTML dưới đây, trình duyệt sẽ hiển thị thông điệp "My first HTML document"
Ví dụ 1.1:

<HTML>
<HEAD>
<TITLE>Welcome to HTML </TITLE>
</HEAD>
<BODY>
<H3>My first HTML document </H3>
</BODY>
</HTML>

Kết quả:

Đặc điểm của HTML
Tài liệu HTML được hiển thị trên trình duyệt. Vậy trình duyệt là gì? Trình duyệt là một ứng dụng được cài đặt trên máy khách. Trình duyệt đọc mã nguồn HTML và hiển thị trang theo các lệnh trong đó.
Trình duyệt được sử dụng để xem các trang web và điều hướng. Trình duyệt được biết đến sớm nhất là Mosaie, được phát triển bởi trung tâm ứng dụng siêu máy tính quốc gia (NCSA).
Ngày nay, có nhiều trình duyệt được sử dụng trên Internet. Netscape Navigator và Microsoft Internet Explorer là hai trình duyệt được sử dụng phổ biến. Đối với người dùng, trình duyệt dễ sử dụng bởi vì nó có giao diện đồ hoạ với việc trỏ và kích chuột.
Để tạo một tài liệu nguồn, bạn phải cần một trình soạn thảo HTML. Ngày nay, có nhiều trình soạn thảo đang được sử dụng: Microsoft FrontPage là một công cụ tổng hợp được dùng để tạo, thiết kế và hiệu chỉnh các trang web. Chúng ta cũng có thể thêm văn bản, hình ảnh, bảng và những thành phần HTML khác vào trang. Thêm vào đó, một biểu mẫu cũng có thể được tạo ra bằng FrontPage. Một khi chúng ta tạo ra giao diện cho trang web, FrontPage tự động tạo mã HTML cần thiết. Chúng ta cũng có thể dùng Notepad để tạo tài liệu HTML. Để xem được tài liệu trên trình duyệt, bạn phải lưu nó với đuôi là .htm hay .html.
Các lệnh HTML được gọi là các thẻ. Các thẻ này được dùng để điều khiển nội dung và hình thức trình bày của tài liệu HTML. Thẻ mở (“<>”) và thẻ đóng (“”), chỉ ra sự bắt đầu và kết thúc của một lệnh HTML.
Ví dụ, thẻ HTML được sử dụng để đánh dấu sự bắt đầu và kết thúc của tài liệu HTML.

<HTML>
…
</HTML>

Chú ý rằng các thẻ ko phân biệt chữ hoa và chữ thường, vì thế bạn có thể sd
<html> thay cho <HTML>
Thẻ HTML bao gồm:
<ELEMENT ATTRIBUTE = value>
ELEMENT: nhận dạng thẻ
ATTRIBUTE: Mô tả thẻ
value: giá trị được thiết lập cho thuộc tính.
Ví dụ, <BODY BGCOLOR = lavender>
Trong ví dụ trên, BODY là phần tử, BGCOLOR là thuộc tính màu nền và
“lavender” là giá trị. Khi cú pháp HTML được thực hiện, màu nền cho cả trang được
thiết lập là màu lavender.
Cấu trúc của một tài liệu HTML
Một tài liệu HTML gồm 3 phần cơ bản:
• Phần HTML: Mọi tài liệu HTML phải bắt đầu bằng thẻ mở <HTML> và
kết thúc bằng thẻ đóng </HTML>. Cặp thẻ này báo cho trình duyệt biết
nội dung giữa chúng là một tài liệu HTML
• Phần  đầu:  Phần  đầu  bắt  đầu  bằng  thẻ  <HEAD>  và  kết  thúc  bởi  thẻ </HEAD>. Phần này chứa tiêu đề hiển thị trên thanh điều hướng của trang Web. Tiêu đề là phần khá quan trọng. Các mốc được dùng để đánh dấu một Website, trình duyệt sử dụng tiêu đề để lưu trữ các mốc này. Do đó,
khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khoá chính yếu cho việc tìm kiếm.
• Phần thân: Phần này nằm sau phần tiêu đề. Phần thân bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang Web của mình. Phần thân bắt đầu bằng thẻ <BODY> và kết thúc bằng thẻ </BODY>
Ví dụ 1.2:

<HTML>
<HEAD>
<TITLE>Welcome to the world of HTML </TITLE>
</HEAD>
<BODY>
<P> This is going to be real fun </P>
</BODY>
</HTML>

Kết quả:

Qui trình tạo một tài liệu HTML
• Định hình trang Web
Để thiết kế một trang Web, trước tiên chúng ta cần phân tích và định hướng mục
đích của trang Web. Điều này giúp ta có cái nhìn tổng quát về trang Web và sẽ thuận
lợi cho việc tổ chức hay nâng cấp trang Web sau này.
Những yêu cầu cần phải nghiên cứu.
- Hình dung nội dung trang Web bạn cần tạo, hướng tới một đích chung
cho trang Web với những chức năng và nhiệm vụ gì?
- Đặt mình vào vị trí người xem, khách hàng. Làm thế nào để nội dung
trình bày thể hiện tốt nhất. Ví dụ bạn có thể thêm vào âm thanh, hình ảnh minh hoạ
cho sinh động, bố cục nội dung, trình bày sao cho hợp lý nhất.
• Tổ chức tập tin
Các yếu tố làm nên trang Web đó là các tập tin, do vậy việc tổ chức tập tin là rất
quan trọng, nó giúp ta thuận lợi trong việc lưu trữ tìm kiếm các đoạn mã hay cơ sở dữ
liệu của trang Web.
Chia các thư mục trung tâm theo cấu trúc của trang Web, bạn có thể tạo một thư
mục riêng rẽ cho tài liệu HTML: các hình ảnh, cơ sở dữ liệu, các tập tin bên ngoài,…
Trong trường hợp trang Web lớn với nhiều trang, bạn có thể chia thành nhiều mục hay
chương, chuyển các hình ảnh đến thư mục độc lập.
• Tạo trang Web
Để tạo một trang Web HTML chúng ta không cần một công cụ đặc biệt nào, chỉ
cần sử dụng bất kỳ bộ soạn thảo văn bản nào như Wordpad hay Notepad, được cung
cấp kèm theo hệ phần mềm Windows.
Dựa trên qui định về cấu trúc của một trang Web, kết hợp với các thẻ cần thiết để
viết ra trang Web của mình.
• Lưu trang Web
Nếu ta sử dụng một trình xử lí văn bản đơn giản để tạo trang Web bạn sẽ không
có vấn đề gì khi lưu trang Web. Nhưng khi ta dùng một trình xử lý văn bản phức tạp
thì bạn phải lưu ý những thông tin bên ngoài mà chương trình sẽ đính kèm vào tập tin
của bạn. Để đảm bảo mọi trình duyệt sẽ nhận diện được tập tin đó, bạn phải đặt phải
đặt đuôi của tập tin đúng.
- Mỗi tập tin được lưu phần đuôi của nó có dạng .htm hay .html
- Chọn thư mục thích hợp để lưu trang Web.
- Xem trang Web qua trình duyệt
Khi đã tạo ra trang Web chúng ta cần xem nó như thế nào qua một trình duyệt
thông thường là Internet Explorer.

Nguồn: hungtq.com

Ngôn ngữ đánh dấu siêu văn bản và HTML

 

Do những nhu cầu phát triển của khoa học công nghệ mà người ta đã xây dựng ra một ngôn ngữ có tên: Ngôn ngữ đánh dấu tổng quát (SGML - Standard Generalized Markup Language). SGML được phát triển bởi Ed Mosher, Ray Lorie và Charles F. Goldfarb của nhóm IBM research vào năm 1969.

     Ban đầu nó có tên là Generalized Markup Language (GML), và được thiết kế để diễn tả các ngôn ngữ khác bao gồm văn phạm,  từ  vựng  của  chúng.  Năm  1986,  SGML  được  tổ  chức  ISO  (International Standard Organisation) thu nhận làm tiêu chuẩn để lưu trữ và trao đổi dữ liệu. Và sau này các ngôn ngữ đánh dấu thiết bị điện tử, thiết kế Web được phát triển dựa vào cơ sở của ngôn ngữ đánh dấu tổng quát SGML.

Ngôn ngữ đánhdấu siêu văn bản

Ngôn ngữ đánh dấu siêu văn bản (HTML - Hyper Text Markup Language) là một ngôn ngữ đánh dấu được thiết kế để tạo ra các trang Web, trong đó các thông tin được trình bày trên World Wide Web. HTML là một ứng dụng đơn giản của SGML, được sử dụng trong các tổ chức công nghệ truyền thông. HTML giờ đây đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản mới nhất của nó hiện là HTML 4.01. Tuy nhiên, HTML hiện không còn được phát triển tiếp, người ta đã thay thế nó bằng XHTML.

HTML tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào mạng Internet. Các file này chứa thẻ đánh dấu, là các chỉ thị cho chương trình về cách hiển thị, xử lý văn bản ở dạng thuần túy. Các file này thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP, sau đó thì phần HTML sẽ được hiển thị thông qua một trình duyệt web, các trình duyệt đảm nhiệm công việc đọc văn bản của trang cho người sử dụng, phần mềm đọc email, hay một thiết bị không dây như điện thoại di động.

Ngôn ngữ đánh dấu mở rộng

Ngôn ngữ đánh dấu mở rộng (XML – eXtend Markup Language) khá giống với HTML, hai ngôn ngữ này có cùng luật cú pháp. Tuy nhiên, tính linh hoạt của XML cho phép bạn tạo và sử dụng tập thẻ và tập thuộc tính riêng để nhận biết các phần tử cấu trúc và nội dung tài liệu.

XML không chỉ là ngôn ngữ đánh dấu, nó còn có phương pháp định ra nội dung tài liệu, tương tự như HTML định hình thức tài liệu trên Web. Với HTML, người thiết kế đánh dấu văn bản, hình ảnh cùng các thành phần khác của trang Web bằng tập thẻ mà không liên quan tới ý nghĩa tài liệu, XML không chỉ chỉ định hình thức mà còn cả nội dung tài liệu.

XML được xem là công cụ mạnh hơn HTML do nó mang lại thông tin đầy đủ về dữ liệu. Một số tổ chức chuyên môn đã xây dựng ngôn ngữ XML riêng, bao gồm các thẻ nhận diện đặc tả công nghiệp. Ví dụ: Ngành công nghiệp hóa học đã phát triển Chemical Markup Language (CML).

XML giúp bạn tạo tài liệu độc lập với server. Tài liệu được nằm ngay trên máy khi tài liệu được tải về tiếp tục sử dụng không phụ thuộc vào Server. Mặt khác XML mang tính chặt chẽ theo tiêu chuẩn của ngôn ngữ đánh dấu văn bản.

Ngôn ngữ XHTML

XHTML là sự kết hợp giữa HTML 4.0 và XML 1.0 thành một định dạng riêng cho Web. XHTML cho phép HTML mở rộng bằng các thẻ sở hữu. XHTML được mã hóa chặt chẽ hơn HTML và phải tuân thủ nhiều quy tắc cấu trúc hơn.

XHTML 1.0 được thiết kế nhằm mục đích tạo thói quen tốt cho người xây dựng trang Web. Bởi vì có rất nhiều người trình bày trang Web theo cách thức của một trình duyệt thể hiện mà không quan tâm tới sử dụng các HTML chuẩn, điều này sẽ gây ra hai tác hại: Thứ nhất là kết quả hiển thị sẽ phụ thuộc vào trình duyệt của người sử dụng, thứ hai là tạo ra thói quen không tốt khi thiết kế, đó là chỉ quan tâm tới trình duyệt thể hiện mục đích của mình mà không quan tâm chuẩn của nó.

Sử dụng XHTML chuẩn là những bước đầu tiên để sẵn sàng xây dựng và triển khai XML vì việc xây dựng XML đòi hỏi phải chặt chẽ hơn HTML và XML không chấp nhận một lỗi cú pháp trong tài liệu.

Có hai lí do để sử dụng XHTML cho Website:

- Xây dựng các trang web động một cách tin cậy, dựa vào cú pháp chặt chẽ. Dữ liệu cho các trang Web động thường được khai thác từ cơ sở dữ liệu, các file hoặc các nguồn khác và được hiển thị theo những template phụ thuộc vào yêu cầu của người sử dụng. Việc xây dựng một cách cẩu thả sẽ không chỉ gây ra những lỗi trong việc chèn dữ liệu vào những vị trí trong trang Web mà có thể gây ra những lỗi trả về phía người dùng.

-   Việc xây dựng trang Web bằng XHTML sẽ nhanh hơn bởi trình duyệt sẽ không mất nhiều thời gian để dịch, và sửa lỗi .

Ngôn ngữ DHTML

Khi Microsoft và Netscape đưa ra Version 4 của các trình duyệt, thì những nhà phát triển Web có một lựa chọn mới: Dynamic HTML (DHTML). Trong thực tế nó là một tập hợp gồm HTML, Cascading Style Sheets (CSS), và JavaScript. Tập hợp các công nghệ trên cho phép các nhà phát triển sửa đổi nội dung và cấu trúc của một trang Web một cách nhanh chóng.

DHTML yêu cầu sự hỗ trợ từ các trình duyệt. Mặc dù cả Internet Explorer và Netscape đều hỗ trợ DHTML, nhưng cách thể hiện của chúng là khác nhau, vì vậy các nhà phát triển cần phải biết được loại trình duyệt nào mà phía client dùng. DHTML thật sự là một bước tiến mới. Hiện nay DHTML vẫn đang trên con đường phát triển mạnh.

DHTML giúp tăng cường tính tương tác của các đối tượng điều khiển trong trang HTML tĩnh bằng cách cho phép người dùng VBscript hoặc Javascript điều khiển chúng. Ví dụ một thẻ image để nhúng ảnh vào trang web có thể nhận biết khi người dùng di chuyển chuột trên nó bằng cách cài đặt hàm xử lý sự kiện OnMouseOver, khi đó thông qua những xử lý thích hợp sẽ làm đối tượng hình ảnh trở nên sống động hơn.
Nhìn chung, bên cạnh những mở rộng như tạo những hiệu ứng MouseOver, chuỗi chữ di chuyển động, thay đổi màu sắc,... Các khía cạnh bảo mật của DHTML tương tự như HTML vì nó dựa trên nền tảng HTML.

Nguồn: hungtq.com

Tìm hiểu và cài đặt Google Analytics cho web site của bạn

Google Analytics được nhiều nhà quản trị đánh giá là một công cụ vô cùng quan trọng, có thể nói là toàn năng khi cho ta biết những chỉ số từ cơ bản đến chi tiết. Đối với các cấp quản lý, Google Analytics càng tỏ ra đắc lực trong việc giúp phân tích và đưa ra quyết định.


Với người mới bắt đầu tìm hiểu, cài đặt, sử dụng, khai thác nó thì trước tiên chúng ta phải làm rõ: Google Analytics là gì? Sau đây chúng ta cùng nhau tìm hiểu để trả lời câu hỏi đó.

Google Analytics là gì?

Google Analytics (viết tắt là GA) là một dịch vụ miễn phí của Google cho phép tạo ra các bảng thống kê chi tiết về khách đã viếng thăm một trang web. Nó là sản phẩm được các nhà Marketing trong giới Internet dùng để đối chọi lại với giới webmaster và giới kỹ thuật trong khi nền công nghiệp phân tích web đang ngày càng phát triển.

Google Analytics không hề khó sử dụng. Hệ thống này được Google phát triển và sắp xếp cực kì khoa học, logic và rõ ràng. Khả năng customize của nó cũng vô cùng tuyệt vời.

Google Analytics có các chế độ cảnh báo thông minh, các bộ lọc mạnh mẽ và hữu hiệu cho từng vị trí (Tùy biến để cho Dashboard của Sale Manager khác với SEO Manager, khác với Adwords Manager).

Google Analytics có thể tích hợp với nhiều sản phẩm khác của Google như Google Adwords, Google Adsense, Google Webmaster Tools…

Các tính năng chính của Google Analytics gồm:

• Tùy chỉnh Dashboard để xem những dữ liệu cần thiết
• Sử dụng Advanced Segment để theo dõi các chiến dịch cụ thể
• Xem dữ liệu  nhân khẩu học (Demographic) của nguồn traffic: Nhóm tuổi, địa điểm, chủ đề ưa thích…
• Xem khách hàng tìm kiếm gì trên website
• Hình ảnh hóa các nội dung được ưa thích nhất
• Funnel Visualization: Người sử dụng thường rời bỏ shopping cart tại bước nào
• Theo dõi doanh thu của các sản phẩm
• Theo dõi hành vi người sử dụng (Multi-Channel Funnels)
• Tạo các mô hình so sánh mức độ tham gia của các kênh marketing (Model Comparision)

Hướng dẫn cài đặt Google Analytics

Các bước cài đặt Google Analytics diễn ra theo trình tự như sau:

1. Đăng ký Google Analytics
2. Nhúng Google Analytics vào website
3. Kiểm tra code Google Analytics

Bước 1: Đăng ký Google Analytics

Để đăng ký Google Analytics, bạn truy cập vào trang chủ Google Analytics ở links https://www.google.com/analytics. Nhấn vào nút "Sign in to Google Analytics", sau đó đăng nhập vào bằng Gmail của bạn. (Nếu chưa có thì tạo lấy một cái). Bạn sẽ đến màn hình Sign Up Google Analytics như ở dưới đây:

Ấn nút Sign Up để đến màn hình tạo tài khoản mới như dưới đây:

Như hình ảnh trên, mình sẽ nhập:

– Account name là: Trang web của hun8thai
– Website name là: hun8thai website
_ Website URL là: www.hungtq.com
(Lưu ý phải nhập chính xác địa chỉ trang web. Phân biệt giữa http:// và https://, có www hay không. Cẩn thận thì xem có dấu gạch chéo (dấu “/”) ở cuối hay không?)

_ Industry Category: chọn lĩnh vực mà website bạn đang hoạt động

Sau đó bấm Get tracking ID, chấp nhận điều khoản của Google là bạn hoàn thành bước đăng ký Google Analytics

Đối với các bạn đã có tài khoản từ trước, để thêm website vào Google Analytics, bạn làm như sau:

Vào Admin –> Property –> Create new property

Sau đó bạn sẽ được đưa đến màn hình giống hệt như mình post ở trên khi đăng kí mới một tài khoản.

Làm theo các bước như trên là bạn đã hoàn thành việc thêm website vào Google Analytics

Bước 2: Thêm tracking code vào website

• Lấy tracking code:

Để lấy tracking code, các bạn làm như sau:

Vào Admin. Dưới mục Property chọn phần Tracking Info. Tiếp đó nhấn vào Tracking code. Giao diện trông sẽ như thế này:

Copy lại đoạn code để chuẩn bị cho bước tiếp theo

• Thêm tracking code vào website

Google Analytics đo đạc và lấy thông tin từ website của bạn thông qua một đoạn mã Javascript (còn gọi là Mã theo dõi). Đó chính là đoạn mã bạn vừa copy.

Việc bây giờ là thêm đoạn mã này vào đầu tất cả các trang trên website của bạn.

Để thêm đoạn mã này vào đầu tất cả các trang trên website, chúng ta sẽ cài Google Analytics code vào nơi mà bất cứ trang con nào cũng phải load. Và, có 2 chỗ mà trang con nào cũng có là Header và Footer. Vì vậy chúng ta chèn đoạn code này vào Footer hoặc Header đều được.

Nhưng khi một người vào website của ta, trang web sẽ được tải từ trên xuống dưới. Header sẽ được tải đầu tiên, Footer được tải cuối cùng. Nếu mà thêm vào footer thì nhỡ trang web chưa kịp load hết, footer chưa kịp load hết mà người ta đã bỏ đi rồi, vậy thì mình sẽ không đo được traffic đó.

Vì vậy nên ta cài Google Analytics code vào header là hợp lí.

– Cách cài đặt Google Analytics code vào header:

Tùy thuộc vào nền tảng web mà bạn xây dựng trên mà có từng cách khác nhau. Dành chút thời gian tìm kiếm trên Google thì các cách “thêm code vào header” rất nhiều.

Ở đây mình đơn giản chỉ cần paste đoạn code đã copy ở trên vào phần header của trang như sau:

...

<head>

...

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', '**************', 'auto');

ga('send', 'pageview');

</script>

...

</head>

...

Để kiểm tra code đã hoạt động chưa, bạn có thể nhờ bạn bè của mình (hoặc chính bản thân bạn) truy cập vào website. Ngay lúc đó, bạn vào Report –> Real Time –> Over View. Nếu số liệu cho thấy có người đang truy cập thì code hoạt động rồi.

Tinh chỉnh Google Analytics:

Về cơ bản, sau khi làm theo các hướng dẫn cài đặt Google Analytisc cho website như ở phần trên là bạn đã có thể an tâm theo dõi số liệu hàng ngày.

Đây là phần cài đặt Google Analytics nâng cao, dành cho những bạn thực sự làm việc chuyên sâu với dữ liệu GA!

Một số tính năng của Google Analytics cần được enhance (cài đặt nâng cao) để các số liệu hoạt động chính xác hơn. Đơn giản, ta chỉ cần cài đặt Google Analytics trong phần Admin để tăng hiệu quả cho Google Analytics.

a. Cài đặt Google Analytics ở level Property:

Bạn vào Admin –> Property Setting. Ta sẽ thay đổi một chút ở đây.

– Enable Demographics and Interest Reports: 

Bật tính năng này lên cho phép chúng ta theo dõi các dimension về nhân khẩu học của người truy cập (như độ tuổi, giới tính, ngôn ngữ, vùng, miền…). Các số liệu thu thập được sẽ nằm trong phần Audience Report

Khi bật tính năng này lên, ta cần thêm 1 dòng code nhỏ vào đoạn code Google Analytics. Mình thêm 1 dòng vào đoạn gần cuối cùng của code là:

ga(‘require’, ‘displayfeatures’); 

– Bật tính năng In-Page Analytics | Use enhanced link attribution: 

Tính năng In-Page Analytics cho phép theo dõi các click vào các đường link trên tất cả các trang của bạn. Từ đó bạn biết được rằng, bài post nào thu hút sự chú ý nhiều nhất, đường link nào được click vào nhiều nhất, cụ thể bao nhiêu lần, chiếm bao nhiêu % của tất cả các click trên website…

Nó là một kiểu heatmap (bản đồ nhiệt), nhưng chỉ cho số lượng click vào các đường link. (Heatmap thì hiển thị tất cả các chỗ, kể cả không phải link)

Sau khi bật, để xem báo cáo In-Page Analytics, bạn vào Reporting –> Behavior –> All Page. Cùng hàng với nút Explorer, bạn chọn In-page.

Để việc xem In-Page Analytics này được chính xác hơn, Google cung cấp thêm tính năng Use enhanced link attribution. Ngoài việc enable tính năng này trong mục Admin, bạn cần cài thêm một dòng code vào đoạn mã Google Analytics của mình. Để “Enhanced Link Attribution“, mình thêm tiếp 1 dòng vào ngay bên dưới dòng code demographic nói ở trên là:

ga(‘require’, ‘linkid’, ‘linkid.js’); 

Sau khi thêm 2 dòng code nho nhỏ vào, bây giờ đoạn code Google Analytics của mình là:

...

<head>

...

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', '**************', 'auto');

ga('require', 'linkid', 'linkid.js');

ga('require', 'displayfeatures'); 

ga('send', 'pageview');

</script>

...

</head>

...

– Liên kết với tài khoản Webmaster Tool – Webmaster Tools Settings

Vẫn tại mục Property Setting, phần cuối cùng ta chỉnh là phần liên kết tài khoản Google Analytics với tài khoản Webmaster Tools.

Hành động này cho phép chúng ta kích hoạt báo cáo về Search Engine Optimization trong mục Acquisition

Điều kiện duy nhất là bạn phải có tài khoản Google Webmaster Tools, trang web thêm vào trên Webmaster Tools phải được verify.

Để tạo liên kết giữa 2 tài khoản, bạn nhấn vào nút Edit ở mục Webmaster Tools Setting.

Sau đó, bạn chọn đúng website cần liên kết giữa 2 tài khoản. Nhấn save.

b. Cài đặt Google Analytics ở View level:

Vừa rồi, chúng ta đã bật thêm 3 tính năng ở mục Property Setting. Bây giờ chỉ còn nốt bước View Setting là chúng ta xong mục cài đặt Google Analytics.

Các thay đổi chúng ta sắp làm sẽ nằm tại Admin –> View –> View Setting 

– Đầu tiên là đánh dấu vào mục Exclude all hits from known bots and spiders

Đánh dấu vào mục này nghĩa là đã thông báo tới Google Analytics loại bỏ tất cả các traffic đến từ các loại bot từ các bộ máy khác nhau như MSN bot, Ahrefs bot, Yahoo bot, Bing bot…

Đánh dấu vào mục này thì tất cả các traffic của website đều là traffic của người dùng

– Site Search Settings:

Bạn tò mò muốn biết xem người dùng search những từ khóa gì ở ô tìm kiếm trên website của bạn?!

Bạn nên dùng tính năng Site Search Setting của Google Analytics, vừa đồng bộ, vừa gọn nhẹ.

Để cài đặt tính năng truy vấn tìm kiếm cho Google Analytics, bạn cần xác định được tham số Search trên website của mình là gì. Sau đó nhập vào ô Query parameter. Google Analytics sẽ thực hiện lấy từ khóa nằm sau tham số đó.

Vấn để là xác định tham số search như thế nào?

Đơn giản là: tham số là chữ cái nằm đằng sau dấu chấm hỏi (“?“). Tham số search loanh quanh chỉ có mấy loại thôi: Term, Search, Query, s, q. Muốn biết website của mình dùng tham số gì thì bạn tự search trên website của mình sẽ ra.

Bạn có thể điền tối đa 5 tham số. Thường thì một website chỉ có đến 3 chế độ search là nhiều rồi, ít khi lên tận 5 lắm. Website mình hiện tại chỉ có dùng 1 loại search mặc định của theme, về sau blog phát triển hơn thì cài bộ Google Custom Search trong Webmaster Tools vào là quá thừa thãi cho việc tìm kiếm rồi ^^

Bạn nhấn Save. Vậy là tính năng kiểm tra truy vấn đã được cài vào Google Analytics thành công!

Nguồn: hungtq.com              

Giới thiệu về html - css - javascript

Việc căn bản đầu tiên của lập trình web đó là hiểu được html như thế nào, css là gì và javascript có nhiệm vụ như thế nào trong lập trình web. Một lập trình viên chuyên nghiệp không chỉ biết code giỏi mà còn phải nắm vững những kiến thức căn bản về html, css và javascript. Trong bài hôm nay, tôi sẽ nói sơ lược về 3 thành phần này, nó là gì và đóng vai trò như thế nào trong việc tạo ra một website.

Trong khi PHP, Java hay C# là những ngôn ngữ hoạt động ở phía server thì html, css, javascript là những thành phần hoạt động ở client, tôi chỉ nói javascript ở khía cạnh cơ bản thôi nhé, vì bây giờ javascript đã có thể lập trình phía server, cụ thể là NodeJs. Chúng ta sẽ cùng bắt đầu nào.

Nếu chúng ta xem việc tạo nên một giao diện cho website cũng như việc nấu một món ăn thì html chính là nguyên liệu để làm món ăn đó. Theo như wiki thì là "HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web. HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát triển đã thay thế nó bằng XHTML. Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web. Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản – có thể gõ vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYG phức tạp. HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày.

Như vậy html là chúng ta dùng tập các thẻ đã được định nghĩa bởi một chuẩn nào đó để định nghĩa ra trang web, dựa vào việc đánh dấu này, trình duyệt sẽ đọc được và hiển thị cũng theo một chuẩn nào đó. Một ví dụ đơn giản không thể bỏ qua, Hello World cho html:

<!DOCTYPE html> <html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <link rel="stylesheet" href="style.css" type="text/css" />

        <title>Life And Line - Lập trình và cuộc sống</title>

    </head>

    <body>

        <h1>Hello world!</h1>

    </body>

</html>

Các nhà phát triển html đã định nghĩa ra các thẻ với những chức năng đặc thù riêng của chúng, về ý nghĩa của từng thẻ tôi sẽ không nói ở đây, các bạn có thể google để biết ý nghĩa của các thẻ đó. Chúng ta có cần phải ghi nhớ không? Có lẽ bạn không cần ghi nhớ chúng ngay, nếu các bạn làm nhiều nó sẽ nhớ đến bạn thôi.

Một số thẻ mà các bạn nên tìm hiểu trước, ngoài các thẻ hiển nhiên như <html>, <head>,  <meta>, <title>,... các bạn còn cần phải biết về các thẻ <script> <style>, div>, <table>, các thẻ heading h1 đến h6, thẻ <span>, <p>, thẻ danh sách <ul>, <li>, thẻ liên kết <a>, các thẻ về form như <label>, <input>, <textarea>, thẻ chọn <select>, <option>., các thẻ trình bày dữ liệu <table>, <tr>, <td>... Chỉ với những thẻ mà tôi đã liệt kê ra chúng ta đã có thể thiết kế nên được các giao diện rồi.

Nếu như html là nguyên liệu, thì javascript lại chính là hương vị của món ăn, javascript giúp tăng tính trải nghiệm của người dùng đối với trang web, đối với javascript ở client, ngoài việc giúp một phần trong thiết kế giao diện như các slide chuyển động, các hiệu ứng đẹp thì nó còn giúp chúng ta kiểm tra sự hợp lệ của dữ liệu, một yếu tố làm cho javascript trở nên quan trọng nữa đó là ajax (chúng ta sẽ tìm hiểu nó sau), với ajax, sự tương tác giữa người dùng với website trở nên linh hoạt và nhanh nhẹ hơn đi rất nhiều nhờ vào việc tải lại một phần trang web của nó.

Khi chúng ta lập trình web thì thường chúng ta không viết javascript thuần mà thường sử dụng một thư viện nào đó như jQuery chẳng hạn. Chúng ta sẽ tìm hiểu về các thư viện này sau.

Thứ còn lại không thể thiếu đó chính là hình thức của món ăn sau khi chế biến xong, với html, để nó trở nên có hình hài và đẹp đẽ, chúng ta cần tới css, css là một ngôn ngữ giúp trình bày html. Với sự có mặt của css, trang web của chúng ta trở lên lung linh hơn rất nhiều. Css có thể thay đổi các thuộc tính mặc định của các thẻ html, ví dụ:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!DOCTYPE html> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <link rel="stylesheet" href="style.css" type="text/css" />         <style type="text/css">             h1{font-weight:normal}         </style>         <title>Life And Line - Lập trình và cuộc sống</title>     </head>     <body>         <h1>Hello world!</h1>     </body> </html>

Như bạn thấy thẻ h1 thường là kiểu chữ đậm, css giúp chúng ta biến nó thành kiểu thường. Các thuộc tính css, bạn có thể tìm hiểu từ trang w3schools.

Như vậy, chúng ta sẽ kết hợp ba thành phần html, css và javascript cho việc thiết kế một website hoàn chỉnh. Chúng ta đã tìm hiểu sơ qua về các thành phần client của một website, những bài viết tiếp theo chúng ta sẽ tìm hiểu cách tạo ra một giao diện bằng html và css.

Nguồn: hungtq.com