C3 DM Chaffey Et Al Class Presentation

University of Information Technology – Vietnam National University, Ho Chi Minh City Dr.
Tran Van Hai Trieu

Faculty of Information Systems
Chapter 3
Building Website
Chaffey et al., Digital Marketing: Strategy, Implementation and Practice, Copyright © 2022, 2019, 2016, 2012 Pearson Education, Inc. All Rights Reserved
University of Information Technology – Vietnam National University, Ho Chi Minh City Dr. Tran Van Hai Trieu
Learning objectives
1. Website benefits
2. How to create a website
3. What makes a good website
4. Practice making a website
Questions for marketers

1. What is the primary reason for having a website?
2. Who are the website's targeted customers?
3. What are a website's essential characteristics and
functions to achieve its objectives and satisfy its
audience?
4. What type of content will appear on the website,
and how will it be structured and displayed?
5. How will the website be marketed and advertised
to attract visitors and produce leads or sales?
6. How will the website be measured and monitored
for effectiveness?
1. Website benefits
Website advantages
➢ Teamwork (15 minutes)
❖ What is a good website?
❖ What is a bad website?
❖ Find websites to discuss, compare, and explain
why they are good or bad.
Website advantages
Understand
Traffic
Create Communication
Convert to sales with users/ Remarketing
Branding
consumers/
businesses
Figure 1.1: Website advantages. Source: Own processing.
2. How to create website
Terminologies
Above the fold The information shows up on the screen
without requiring the user to scroll.
Accessibility The level to which a website is accessible to
visitors who have physical or technical
difficulties.
Alt text The "alt" attribute for the IMG HTML tag is
used in HTML to assign a text field to an
image on a webpage, typically with a
descriptive function, telling the search engine
or user what a picture is about and showing
the text in cases where the image cannot be
loaded. This is called the Alt Tag.
Figure 1.1: Terminologies. Source: Own processing.
Terminologies
Figure 1.2: Above the fold. Source: https://www.convertcart.com/blog/above-the-fold-content.
Terminologies
Brand (visual How your logo, colors, and styling
or corporate components are translated from print to
identity digital resources.
Breadcrumbs Links that show a page's position in the
website's structure, are usually at the top of
the page.
Call to Action A phrase is published to persuade the reader
to do something, such as book a car today or
sign up.
Content A system enables an administrator to edit
Management website content without the need for a
System (CMS) developer.
Terminologies
Figure 1.4: eBay. Source: https://www.ebay.com/b/Binoculars-Monoculars/83880/bn_152398.
Terminologies
Cascading A programming language that specifies the styles
Style (fonts, colors, and so on) utilized to display text and
Sheets information. This language is used in a variety of
(CSS) contexts, including web pages.
dpi Dots per inch (in an image). i.e. the screen
resolution is 72 dpi, etc.
Flash Technology used to display animation and video on
websites.
Hyper Text The primary programming language for building and
Markup displaying websites and other internet content.
Language
(HTML)
Terminologies
Figure 1.6: Example of HTML. Source: Own processing.
Terminologies
Information Information and materials are organized,
architecture structured, and labeled for usability.
Landing page A search engine listing's landing pages
match the search query best perform best.
Meta data Page and component information gives
search engines context.
SERP (Search User-searched results.
engine results
page)
Sitemap Website pages link to each other in
information hierarchy.
URL (Universal Every website has a unique address.
Resource Locator)
Terminologies
Figure 1.8: Example of Website. Source: Own processing.
Terminologies
Figure 1.9: Example of sitemap. Source: Own processing.
How website works?
Domain 220
Hai Bà Trưng
Theme
Street
Hosting
Figure 1.10: How website works. Source: Own processing.
Create free website
Google My Business
Google site
Wordpress
Social network
Figure 1.11: Create free website. Source: Own processing.
Domain name
vn.godaddy.com
nhanhoa.com
pavietnam.vn
Matbao.net
Bkns.vn
Figure 1.12: Domain name. Source: Own processing.
Finding the perfect domain name
• Name must be related to your company or

product
• Find good keyword to name (optional): using
Google Keyword Planner
• Search for available domain names
(https://instantdomainsearch.com/)
• Tips get cheap domain names (godaddy)
Hosting service
• To store all website database
Figure 1.13: Hosting service. Source: Own processing.
In conclusion
• Terminologies
• Create free website Understand
• Domain name
• Hosting service
3. What makes a good website
Five elements create a good website
1 2 3 4 5
Objective Layout/Sitemap Contents Interface Optimization
For what? How will the Are the Do contents Can search
For whom? layout/ sitemap contents have many engine find
look like? useful? formats? Is your
the interface website? Is
applicable your website
for different loaded fast?
screens
(PC/mobile)
Figure 1.14: Five elements create a good website. Source: Own processing.
Site loading time
Site loading time
• Image and video will impact heavily on site

loading time
Optimized Speed
Top websites’ loading time
3s 4.1s 5s 8s
Excell
Xuất Pretty
Good
Tốt KháGood
tốt Slow
Chậm
sắc
ence
Figure 1.15: Site loading time. Source: Own processing.
Website interface
Integrated layout Mobile Mobile

(responsive) site app
The layout Offer a distinctive
automatically Optimized layout and
contents for mobile devices, mobile feature
PROS changes to match
ensure simple to design and experience that
with different size, desktop websites
vertical or horizontal easier to modification
don't have
Cannot optimized
loading speed on Take time to edit desktop Costly
mobile devices website and mobile website
CONS.
Not good using Infrastructure Management Infrastructure
experience and redirect Customers Management
Figure 1.16: Website interface. Source: Own processing.
Analysis of website traffic
Figure 1.17: Vietnam’s top website traffic . Source: https://www.semrush.com/website/top/vietnam/all/
In conclusion
• Five elements create a good website
• Site loading time
• Website interface
Understand
• Analysis of website traffic
4. Practice making a website
Why do we need website analytic?
Web analytic is the collection, reporting, and

analysis of data.
1 2 3 4
Analyze the
Know where Optimize your Know your
efficiency of
your visits resource audience
your website
are from
Figure 1.18: Website analytic. Source: Own processing.
How a website analytic tool looks like
Figure 1.19: Example of Website analytic tool. Source: Own processing.
What should be tracked
Who are they? How they know

Overall traffic
New or returning your website
Time spend / Bounce rate (UA)/ Watched Performed

Engagement Rate (GA4) contents action
Figure 1.20: What should be tracked. Source: Own processing.
How to track?
Built-in Stand-alone In-house

tools tools tools
Ask for
customers’
feedbacks
Email / SMS Mobile Website
marketing Speed Testing
reports Tool
Figure 1.21: How to track?. Source: Own processing.
Example of the first case

Find out where sales are Use Google Analytics to:
coming from View your conversion
reports and learn which
Stasia's Bakery has online channels drive traffic and
advertising on the search lead to conversions.
network, the display network
and social networks. This
strategy is working very
efficiently. They want to know
whether they should spend
more money - or less money
- on some channels.
Note: Universal analytics would not
handle data anymore in July 2023.
Newest version of google analytics 4
(GA4) replaced it.
Example of the second case

Understand what Use Google Analytics to:
performs what not? View behavioral reports
and find out what content
To make the site useful visitors and pages they
for visitors (and SEO leave.
help), Stasia's Bakery
writes blog posts and
creates videos... But they
wondered if anyone would
read or watch.
Universal analytics (UA) vs google analytics

4 (GA4): Comparing metrics
Figure 1.22: Universal analytics (UA) vs google analytics 4 (GA4): Comparing metrics
Source: https://www.oncrawl.com/oncrawl-infographics/google-analytics-4-vs-universal-analytics-comparing-metrics/.



Case study of the food truck website and app
1. Layout and
navigation
2. Commands
and actions
3. Contracts:
search, share,
and settings
4. Touch
5. Scaling and
views
6. Notifications
Figure 1.26: Example of the food truck website and app.

Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh868264.aspx

Website
- Two-column
layout pattern:
main content on
left and other
content on right.
- The focal point of
the site, food
trucks, occupies
only about a
third of the
screen.


App
- All space on the
landing page is
dedicated to what
this app is great
at finding a
nearby food
truck.


Website
- Each food truck
category is
represented by a
single picture.
- A user must go
to another page
to see more
trucks in that
category and
then select a
truck to see
details.

Food truck app
designed on the App
with silhouette and grid
A.Top and left margins are
consistent throughout the
app.
B.We use a consistent
margin to separate
different food truck
categories like "Featured
Trucks", "Near me", and
"Asian".
C. Use a consistent margin to separate pictures within a truck category. This margin is
smaller than the food truck category margin to convey page layout hierarchy.
D. The group title of each food truck category is also aligned to the grid.

Website
A. user navigates to a
separate category page on
the website to see all truck
categories.
B. The user then picks a
category (e.g. "Barbecue
food trucks") and enters the
category.
C. The user finally can
choose a truck from the
selected category.


App
A. The home screen includes a hub
page that consists of groups of content:
featured trucks, trucks near me, and
category view.
B. Users can use touch to pan in either
direction to see different categories of
food trucks right on the home screen.
C. Because each hub highlights several
trucks in the category, users can tap on
a truck to go directly to that truck's
page, or they can tap on the category
group header text (e.g. "Asian") to go
to a category page.

Searching for a food
truck using the website
• Search box is always
visible on the site.
• When search results
are displayed, all
website chrome is
still present.
• Users always need
to go to the website
first before
performing a search
for a food truck.

Searching for a food truck
using app
Users can perform a search anywhere
in the app by swiping the edge to
bring up the charms and choosing
search.
When the user starts typing, the app
supplies search suggestions in the
search pane. This way users can
quickly see which terms generate
results. After the user submits their
query (e.g. "barbecue truck"), the app
shows a search results view.
The search results view is clean and
Figure 1.34: Example of the food truck website and app. dedicated only to search results,
Source: http://msdn.microsoft.com/en-
us/library/windows/apps/hh868264.aspx without unnecessary chrome.

Sharing a food truck
photo on website
•Each sharing service has
its own button.
•Sharing buttons are spread
throughout the website.


Sharing a food truck
photo on app
•A consistent location in all
Windows Store apps for all
sharing options.
•Users can invoke Share
anywhere inside the app.
•When a user chooses a
sharing service, the target app
can customize the UI pane and
branding.

In conclusion
• Why do we need website analytic?
• How a website analytic tool looks like.
• What should be tracked.
Understand
• How to track?
• Universal analytics vs google analytics 4:
Comparing metrics
• Case study.
THANK YOU
FOR YOUR ATTENTION
Q&A

C3 DM Chaffey Et Al Class Presentation

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

C3 DM Chaffey Et Al Class Presentation

Uploaded by

Copyright:

Available Formats

University of Information Technology – Vietnam National University, Ho Chi Minh City Dr.

Tran Van Hai Trieu

Questions for marketers

2. How to create website

Figure 1.2: Above the fold. Source: https://www.convertcart.com/blog/above-the-fold-content.

Figure 1.4: eBay. Source: https://www.ebay.com/b/Binoculars-Monoculars/83880/bn_152398.

Figure 1.6: Example of HTML. Source: Own processing.

Figure 1.7: Terminologies. Source: Own processing.

Figure 1.8: Example of Website. Source: Own processing.

Figure 1.9: Example of sitemap. Source: Own processing.

How website works?

Figure 1.10: How website works. Source: Own processing.

Create free website

Figure 1.11: Create free website. Source: Own processing.

Figure 1.12: Domain name. Source: Own processing.

Finding the perfect domain name

• Name must be related to your company or

Figure 1.13: Hosting service. Source: Own processing.

3. What makes a good website

Five elements create a good website

Objective Layout/Sitemap Contents Interface Optimization

Site loading time

Site loading time

• Image and video will impact heavily on site

Top websites’ loading time

Figure 1.15: Site loading time. Source: Own processing.

Integrated layout Mobile Mobile

Analysis of website traffic

Figure 1.17: Vietnam’s top website traffic . Source: https://www.semrush.com/website/top/vietnam/all/

4. Practice making a website

Why do we need website analytic?

Web analytic is the collection, reporting, and

Figure 1.18: Website analytic. Source: Own processing.

How a website analytic tool looks like

Figure 1.19: Example of Website analytic tool. Source: Own processing.

What should be tracked

Who are they? How they know

Time spend / Bounce rate (UA)/ Watched Performed

Figure 1.20: What should be tracked. Source: Own processing.

Built-in Stand-alone In-house

Figure 1.21: How to track?. Source: Own processing.

Example of the first case

Example of the second case

Universal analytics (UA) vs google analytics

Universal analytics (UA) vs google analytics

Universal analytics (UA) vs google analytics

Universal analytics (UA) vs google analytics

Case study of the food truck website and app

Figure 1.26: Example of the food truck website and app.

Case study of the food truck website and app

Figure 1.27: Example of the food truck website and app.

Case study of the food truck website and app

Figure 1.28: Example of the food truck website and app.

Case study of the food truck website and app

Case study of the food truck website and app

Case study of the food truck website and app

Figure 1.31: Example of the food truck website and app.

Case study of the food truck website and app

Case study of the food truck website and app

Case study of the food truck website and app

Case study of the food truck website and app

Figure 1.35: Example of the food truck website and app.

Case study of the food truck website and app