Marketing - Web Brand (Joomla)

1. Scope

The scope of this process is to showcase an expansion of the site's structure and construction, providing a great user experience, maintaining the company's image, content, and, of course, its level of projection in the marketing and branding sphere.

• Brand

  • UI/UX (User Interface/User Experience):

    • Web (CMS)

    • Academy (Training - LMS)

    • Communications

  • Site positioning

• Analysis and improvements

  • Reports

1.1 Software Coverage

• Brand

  • UI/UX

    • Web (CMS)

      • Corporate

      • Replicated

      • Influencers

    • Training

      • File Standards

      • UI/UX LMS (Learning Management System)

  • Positioning

    • Tags for Search Engines

    • Tags for Sharing on Social Networks

    • Open Graph Tags (OG Tags)

    • SEO-Friendly URLs

• Intelligence and Analysis

  • Tracking Tags

  • Analysis Reports

2. Definitions

This is where the construction of the site is carried out based on the templates, we share with you. Once the template is chosen, the content, backgrounds, and custom designs are defined so that the website adapts to the company's identity. Initially, it is of great value to identify the different terms used in the system to gain a better understanding of its purpose and operation.

What is CMS?

It is a tool that allows for the customization of website content. It also includes extensions that enhance the user experience. Among its most prominent plugins are Addthis and service chats.

What is LMS?

It is an e-learning or online teaching platform that allows for the creation and management of personalized learning environments.

What is UI/UX, and why is it so important?

UX is based on achieving the highest level of satisfaction with regards to user experience. It implements all sorts of strategies based on the user's needs, goals, motivation, expectations, and capabilities.

UI is the interface that allows the user to interact effectively with a system. UI and UX design are focused on satisfying the user's needs, with the goal of building brand value. Furthermore, by taking care of this aspect, the company's reputation will grow.

What are Tags and Metadata?

Meta tags provide information to browsers and search engines about a web page. These are not visible to users but play a crucial role in user experience and site positioning.

What is Google Tag Manager?

Tag Manager is a Google tool that allows for the addition and updating of tags through integrations with other services for tracking conversions, site analysis, remarketing, and more. There are countless ways to track site activity, and the intuitive design allows for tag changes when needed.

What is a Microsite?

It is a copy of the corporate site for the advisor. This option has the same functionality as the main website, but it has a customized URL and contains the principal information of the site owner.

3. Key Features

3.1. Image/Brand and Positioning

• Optimization and Enhancement of UI/UX: Defining and designing content for optimal display makes it possible to achieve the goal of providing the best user experience. This clarity and focus projected by the company become a reality through this process.

• Creation and Management of High-Quality Site Content: The quality of content and the implementation of strategies added to the sites are of vital importance. This is because users greatly depend on it to understand information clearly and access content relevant to their needs.

• Site Positioning for Increased Traffic: By applying best practices and implementing positioning techniques, the site can be easily found by users, offering added value. One way to achieve this is through the use of tags.

4. Conditions

For the proper use of the software functionalities, it is necessary to have defined in advance the technical and/or business elements, such as:

• Brand Manual: Define structural themes, form, logo usage, appropriate brand guidelines, and typographic styles to include and maintain the essence and philosophy of the company.

• Site Map: Define and provide information about the pages, content, and other elements that will be used on the sites and the scope of the user experience flow they will cover.

• Content Plan: Define the focus and necessary objectives that will be covered in the content.

• Content Maps: Define what type of content will be used (images, text, video, menu structure). The content plan for this configuration should be clear.

• Graphic Schemas: Definition and coverage of graphic schemas to establish key ideas, interaction points, and flows that the end customer will go through.

• Scope of Interaction Functionalities: Determine the interaction functionalities that apply to the business model (use of e-commerce, use of replicated sites, use of the academy, etc.).

• Management of Related Systems Accounts: Accounts for related systems used for positioning, integrations, and communication elements (Facebook, Google, etc.).

5. Operation

5.1. Journey

Now, Brenda, the leader of the marketing process at ABC LLC, along with her team, is looking for the best strategies to reach potential customers and those interested in the products and services offered by the company.

• In Marketing, Brenda will be responsible for the following processes:

  • Implementing the best strategies to manage content, access, and positioning, offering a good user experience and usability on the following sites.

    • UI/UX: Web (Joomla)

      • Corporate

      • Replicated

      • Influencers

    • UI/UX Moodle: Training

    • Positioning: Tags

    • Positioning: SEO-Friendly URLs

  • Once Brenda and her team have defined this, it's important to conduct tracking to see the results of customer usage and gather feedback based on the experience obtained.

    • Analysis and Improvements

      • Analysis

      • Reports

6. Configurable Elements

6.1. Main Configurations

• CMS Content Configuration

  • Pages in SPPage Builder

    • Links in Buttons and Images

    • Images/Banners for Mobile and Desktop

  • Navigation Menu

  • Modules

  • S4DS/Plugins Functionalities

  • Blog/Article Creation

6.2. Related Module Configuration

• Multilanguage Configuration (depending on the company's business model, if applicable)

• Implementation of predefined templates for each process (cart abandonment, successful purchase, etc.)

• Configuration of featured product categories

• Configuration of TAG in environment variables and Joomla

• Management of newsletters for sending emails and event notifications (Account)

• Creation and management of the Tag Manager account for search engine positioning (created by the client)

• Creation of the funnel in Google Analytics for traffic metric analysis on the sites (created by the client)

6.3. Module Configuration

CMS

Pages in SP Page Builder

Create Page

• Access SP Page Builder

Open

Open

• Once redirected to the new page, you should add the title and click on "Save." Once this is done, you can start with the content creation.

Creating Positions

For the creation of Joomla positions, there are predefined ones that can be seen by clicking on "Add New Row." Simply select the one needed, and the component will generate it automatically.

If the desired position doesn't exist, the correct way to generate it is by entering the values for the columns you want. It's important to note that the sum of these values cannot be greater or less than 12. For example:

If you need positions with 2 small ones on the sides and two larger ones in the center, you can do it like this:

The values of 2 correspond to the small positions, and the value of 4 corresponds to the larger ones. The sum is exactly 12. Once you click on "Generate," the columns are displayed:

Adding Images

Once you have the position or field where you want to add the image, click on the position, and a pop-up with available options will appear. In this case, select the image option:

Once this is done, the configuration is displayed:

• Admin Label: Enter the name for the image so that it's easy to identify when editing it.

• Title: The title you enter is displayed on the image at the top.

• Select Image: Choose the image by either uploading one or selecting from the existing ones.

Upload a new image from your computer or select from the ones that are already loaded on the site.

Once you have the desired image, save it. If the image has a link, it can be added in the link field within the modal where the image was added.

Configuring Responsive Banners:

• Search for the carousel element.

• Select the display you want for the banner.

In the advanced tab, there's the option to hide or show elements for desktop, iPad, and mobile. Depending on your preferences, you should activate or deactivate these options. If you configure it for mobile, there should be another banner that is visible for desktop.

Creating a Menu

Each client has their navigation tree, which consists of one navigation tree that has content, meaning pages of S4DS or just SP Page Builder content, and one navigation tree that contains the URLs of the main menu, where there are only links. These can be identified by their names:

• The one that says "Main menu" contains the URLs of the main menu.

• The one that says "Menu" and the language, for example: "S4DS MENU EN"

To create a menu, follow these steps:

• Access the menu manager.

• Access "All Menu Items" and click on the "New" button.

To create a new menu item, you need to complete the following fields:

• Menu Title: Name this new menu item. This is a required field.

• Alias: Generally, you can leave this field empty, and Joomla will automatically fill it. The content of this field determines the page's URL when SEF (Search Engine Friendly) is active.

• Menu: Here, you can choose which navigation tree this new menu item belongs to.

• Parent Item: You can specify where the new menu item should be placed. You can make it the Root Menu Item (the first item) or a subitem of an existing item. Let's choose "Root Menu Item."

• Status: If you want your new item to be displayed on your site, set it to Published. If you want to make this menu item invisible on the site, select Unpublished. "Trashed" removes the item from the site but puts it in the Trash, from where it can be deleted. If you want to delete the item, choose "Trashed."

• Ordering: Click the "Save" button at the top of the page, and the Ordering dropdown will become visible. The new menu item will appear at the bottom of the list by default, but you can change it by selecting "First," "Last," or another menu item in the list to change its position.

• Home Page: You can select this option if you want this menu item to be your Home Page.

• Access: This option specifies who will be able to see this new menu item:

  • Public - All visitors

  • Registered - Only registered users.

  • Special - Users assigned to specific groups, in addition to Registered

• Link Type: Specify how to open the article. It can be the same browser window (Same Window), a new browser window (New Window with Navigation Bar), or a pop-up window (New Window without Navigation Bar).

• Template Style: Select a specific template for this menu item or leave it as 'Use Default' for the default template.

• Language: Select a specific language or leave it as the default of All.

Once you've filled in these fields, click on "Save."

With these steps completed, you can access the website using the alias name you set, such as https://demo.s4ds.com/pagina-prueba-demo.

The website has elements that can be assigned to selected pages. These modules can have S4DS functionalities or be purely visual elements without functionality, such as banners or videos, etc.

S4DS Modules:

• Login

• Small Banner

• Product Carousels

• Shopping Cart

• Wishlist

Content Modules:

• Banners visible on catalog pages

• Videos

• Texts

• Buttons

• Footer

S4DS modules are delivered to each client pre-configured and typically do not change. Content modules created with SP Page Builder can be customized, and styles can be edited as explained earlier.

S4DS Functionalities and Plugins

Joomla, as a CMS, allows the installation of plugins depending on the specific needs. These plugins can be found and downloaded from: Joomla.org

Currently, in S4DS, there are two types of add-ons:

1. Joomla's own plugins, such as those for SEO, forms, and social media. Each one installed has its own configuration and documentation with respective instructions.

2. The other type is those that can be configured as S4DS modules or pages, for example, the "Small Banner." This can be configured from a Joomla module and an environment variable. It can be placed anywhere on the page, and you can select the pages where it should be displayed.

Configuration for Small Banner:

1. Go to Modules - Extensions > Modules.

2. Click on the green "New" button and select the option "mod_s4ds_integration."

3. Configure with the following settings:

   • MOD_S4DS_INTEGRATION_SERVICE_LABEL: Informational Small Banner

   • COM_S4DS_INTEGRATION_TYPE_LABEL: COM_S4DS_INTEGRATION_SITE

   • COM_S4DS_INTEGRATION_WRAPPER_LABEL: COM_S4DS_INTEGRATION_DIV

   • COM_S4DS_INTEGRATION_REWRITE_LABEL: COM_S4DS_INTEGRATION_YES

   • COM_S4DS_INTEGRATION_SHOW_SIDEBAR_LABEL: COM_S4DS_INTEGRATION_NO

   • COM_S4DS_INTEGRATION_SHOW_SIDEBAR_LABEL: COM_S4DS_INTEGRATION_NO

   • COM_S4DS_INTEGRATION_SHOW_ALERTS_LABEL: COM_S4DS_INTEGRATION_YES

   • COM_S4DS_INTEGRATION_IMPORT_HEADERS_LABEL: COM_S4DS_INTEGRATION_YES

   • Position: Slider

   • Show Title: Hide

   • Access: Public

   • Language: The language it belongs to; each language should have its module.

Result:

Stores:

It is possible to create a page in Joomla that is connected to S4DS. On this page, you can configure the client's stores or points of sale, display a general map, and provide filtering options.

Configuration:

• Create a page - Menu > All Menu Items

• Click on the green "New" button.

• Add the following configuration:

  • Menu Item Type: COM_S4DS_INTEGRATION_XML_DESCRIPTION

  • Template Style: Select the template for the language you are creating the menu for. You can distinguish them by their initials, such as EN and ES.

  • Menu: S4DS Menu (Language initials, e.g., S4DS Menu EN, S4DS Menu ES)

  • Parent Item: web (Depending on the language, select the one that says web-es or web-en)

  • Access: Public

  • Language: The language it belongs to; each language should have its module.

  • Note: /eCommerce/StoreLocatorView.html

• In the "Options" tab, add the following configuration:

  • COM_S4DS_INTEGRATION_SERVICE_LABEL: COM_S4DS_INTEGRATION_APP

  • COM_S4DS_INTEGRATION_TYPE_LABEL: COM_S4DS_INTEGRATION_SITE

  • COM_S4DS_INTEGRATION_WRAPPER_LABEL: COM_S4DS_INTEGRATION_DIV

  • COM_S4DS_INTEGRATION_REWRITE_LABEL: COM_S4DS_INTEGRATION_YES

  • COM_S4DS_INTEGRATION_SHOW_MENU_LABEL: COM_S4DS_INTEGRATION_NO

  • COM_S4DS_INTEGRATION_SHOW_SIDEBAR_LABEL: COM_S4DS_INTEGRATION_NO

  • COM_S4DS_INTEGRATION_SHOW_ALERTS_LABEL: COM_S4DS_INTEGRATION_YES

  • COM_S4DS_INTEGRATION_IMPORT_HEADERS_LABEL: COM_S4DS_INTEGRATION_YES

Wishlist:

In the catalog, there is an option to add a product to favorites by clicking on the heart icon. These products are added to the Wishlist, which is usually located at the top of the website. When you access this page, you can see the list of products that have been selected as favorites and have the option to go and purchase them.

Configuration:

• Access the modules - Extensions > Modules.

• Click on the green "New" button and select the option "mod_s4ds_integration".

• Configure with the following settings:

  • MOD_S4DS_INTEGRATION_SERVICE_LABEL: goToWishList

  • COM_S4DS_INTEGRATION_TYPE_LABEL: COM_S4DS_INTEGRATION_SITE

  • COM_S4DS_INTEGRATION_WRAPPER_LABEL: COM_S4DS_INTEGRATION_DIV

  • COM_S4DS_INTEGRATION_REWRITE_LABEL: COM_S4DS_INTEGRATION_YES

  • COM_S4DS_INTEGRATION_SHOW_SIDEBAR_LABEL: COM_S4DS_INTEGRATION_NO

  • COM_S4DS_INTEGRATION_SHOW_SIDEBAR_LABEL: COM_S4DS_INTEGRATION_NO

  • COM_S4DS_INTEGRATION_SHOW_ALERTS_LABEL: COM_S4DS_INTEGRATION_YES

  • COM_S4DS_INTEGRATION_IMPORT_HEADERS_LABEL: COM_S4DS_INTEGRATION_YES

  • Position: Slider

  • Show Title: Hide

  • Access: Public

  • Language: The language it belongs to; each language should have its module.

  • Note: /webComponents/goToWishList.html

  • In the back office, configure the VE (Virtual Entity) as follows: SHOW_WISHLIST set to T.

Forms - Contact:

This can be managed in two ways. One option is to install a form plugin, which is configurable from Joomla. Alternatively, you can use the built-in S4DS form, which is fully customizable. You can add an image, condition the fields as needed, and even include buttons with links to FAQs or other relevant content for the client.

Configuration:

• Create a page - Menu > All Menu Items.

• Click on the green "New" button.

• Add the following configuration:

  • Menu Item Type: COM_S4DS_INTEGRATION_XML_DESCRIPTION

  • Template Style: Select the template for the language you are creating the menu for. You can distinguish them by their initials, such as EN and ES.

  • Menu: S4DS Menu (Language initials, e.g., S4DS Menu EN, S4DS Menu ES)

  • Parent Item: web (Depending on the language, select the one that says web-es or web-en)

  • Access: Public

  • Language: The language it belongs to; each language should have its module.

• In the "Options" tab, add the following configuration:

  • COM_S4DS_INTEGRATION_SERVICE_LABEL: Contact form

  • COM_S4DS_INTEGRATION_TYPE_LABEL: COM_S4DS_INTEGRATION_SITE

  • COM_S4DS_INTEGRATION_WRAPPER_LABEL: COM_S4DS_INTEGRATION_DIV

  • COM_S4DS_INTEGRATION_REWRITE_LABEL: COM_S4DS_INTEGRATION_YES

  • COM_S4DS_INTEGRATION_SHOW_MENU_LABEL: COM_S4DS_INTEGRATION_NO

  • COM_S4DS_INTEGRATION_SHOW_SIDEBAR_LABEL: COM_S4DS_INTEGRATION_NO

  • COM_S4DS_INTEGRATION_SHOW_ALERTS_LABEL: COM_S4DS_INTEGRATION_YES

  • COM_S4DS_INTEGRATION_IMPORT_HEADERS_LABEL: COM_S4DS_INTEGRATION_YES

Result:

Product Carousels:

The system allows you to place carousels in various parts of the system, which can be configured as allowed by their settings. Currently, the following carousels are available:

• Top Products

• Featured Products configured from the catalog.

These carousels can also be configured in terms of their appearance, such as determining how many items are visible per row or on the first slide.

Configuration for Featured Products:

• Access the modules - Extensions > Modules.

• Click on the green "New" button and select the option "mod_s4ds_integration."

• Configure with the following settings:

  • MOD_S4DS_INTEGRATION_SERVICE_LABEL: Carousel

  • COM_S4DS_INTEGRATION_TYPE_LABEL: COM_S4DS_INTEGRATION_SITE

  • MOD_S4DS_INTEGRATION_REWRITE_LABE: MOD_S4DS_INTEGRATION_YES

  • Show Title: Hide

  • Access: Public

  • Language: The language it belongs to; each language should have its module.

• In the "Configuration" tab, add the following settings:

  • MOD_S4DS_INTEGRATION_PARAM: featuredProducts

  • MOD_S4DS_INTEGRATION_PARAM: 1

  • MOD_S4DS_INTEGRATION_PARAM: Specify the number of images the carousel will have per slider.

Result:

Configuration for Top Products:

• Access the modules - Extensions > Modules.

• Click on the green "New" button and select the option "mod_s4ds_integration."

• Configure with the following settings:

  • MOD_S4DS_INTEGRATION_SERVICE_LABEL: Carousel

  • COM_S4DS_INTEGRATION_TYPE_LABEL: COM_S4DS_INTEGRATION_SITE

  • MOD_S4DS_INTEGRATION_REWRITE_LABE: MOD_S4DS_INTEGRATION_YES

  • Show Title: Hide

  • Access: Public

  • Language: The language it belongs to; each language should have its module.

• In the "Configuration" tab, add the following setting:

  • MOD_S4DS_INTEGRATION_PARAM: TOP

The carousel has two ways of displaying data:

This configuration goes in parameter number 8 MOD_S4DS_INTEGRATION_PARAM.

In parameter number 6, MOD_S4DS_INTEGRATION_PARAM, you add the ID of the catalog you want to display.

Blog Creation

• Access the article manager and click on the "New" option.

• Enter the title and the desired content. This works the same with SP Page Builder, so you just need to add positions and visual elements to those positions.

  • Title: Blog Name

  • Alias: The name that will be used in the blog's URL.

  • Click on the SP Page Builder option.

• You can start adding positions and content.

• In the tabs, you can configure which items can be displayed in the blog, such as name, creation date, creator's name, image, etc.

7. Detailed Scope

7.1. Brand

The brand is one of the most important assets of a company, and within the platform, there are tools to structure the image and communication tone towards consumers and the sales force.

To effectively communicate the brand, Brenda will need to consider the following:

7.1.1. UI/UX

The marketing team should determine how they want their website to look, and for this, they will choose from a series of available templates that best suit the content they want to communicate.

Once the template is chosen, they will establish the images, colors, styles, and finally, the content to be communicated. Together, this reflects the brand's structure in front of the target audience.

7.1.1.1. Websites

S4DS, being a digital ecosystem that brings together different means of interaction, all must align with the brand image. These include:

• Corporate Website: The corporate website may consist of a combination of several sites and brands, allowing for multilingual, multi-brand, multi-country capabilities.

• Replicated Sites: Replicated sites are copies of the corporate site but allow consultants or distributors to personalize the information presented to their clients.

• Influencer Sites: Influencers are consultants with a greater reach in certain audiences, and therefore, the company decides to give them the option of having more information on their replicated site. Influencers can describe their messages to clients in more detail there.

7.1.1.2. Academy

https://s4academy.s4ds.com/

• UI/UX
  The academy refers to the E-Learning module, which uses different styles and templates than the corporate site and, therefore, must be dressed using the same brand image so that the audience does not feel like they are navigating two completely isolated and different sites.

• Types of Content
  The academy also requires the process of creating and publishing content, including activities such as course planning and structuring of learning materials for each course (videos, PDFs, and assessments). This content must also harmonize with the brand to ensure a clear message to users.

7.1.2. Positioning

As a strategy to attract potential customers, a fundamental part is effective SEO (Search Engine Optimization) management, which aims to improve the website's position in search engine results pages.

7.1.2.1. ​Tags for Search Engines

The content system allows adding tags to each of the pages and sections so that search engine indexing systems can better locate the site and its content. This is vital for communication and digital advertising strategies.

This configuration is easily done in the Joomla content manager for each piece of content, using the TagZ open graph library.

7.1.2.2. Tags for Sharing on Social Networks

Today, content must be designed to be shared on social media. Users often copy and paste page links or share them through dynamic links like AddThis.

AddThis is a platform that can be integrated into a website using a widget. Once the widget is added, website visitors can bookmark, share, or publish an item using various services such as Facebook, WhatsApp, Pinterest, and Twitter.

7.1.2.3. Open Graph Tags (OG - Tags)

Open Graph helps social media platforms like Facebook (and nowadays Twitter, LinkedIn, and even WhatsApp) display easily interpretable shared content. Essentially, by using OG tags, you provide your website with specifications that are primarily detected by social media networks and used when publishing or sharing links or URLs.

7.1.2.4. Friendly URLs

To effectively position a website in search engines, it's not enough to add the correct tags to the pages and have relevant content. It's also necessary for the URLs or addresses of each page, including product pages, to have a clear structure without parameters that search engines don't understand.

For example, instead of having a product page with a product code like this:

https://www.demo.com/productid=43&category=34&language=21

It's better to have a friendly URL with the product name like this:

https://www.demo.com/blue-ladies-shirt-long-sleeve-xl

The system generates these kinds of friendly URLs to allow search engines to access catalog products by their names rather than internal codes.

This configuration is activated through an environment variable:

• CATALOG_FRIENDLY_URL

7.2. Content Factory

Content is crucial for marketing, and there is a powerful Content Management System (CMS) based on JOOMLA available. This system allows individuals with profiles in graphic design and a focus on web content to continuously update the website.

7.2.1. Website Content

The website can be refreshed using content management tools. The content management system enables the marketing team to easily communicate the company's brand or brands to users.

In this case, Brenda can communicate and edit brand content, even for multiple brands within the same portal, each maintaining its image.

7.2.2. E-Learning Content

The content of the e-learning courses on the Moodle-based platform allows training teams the flexibility to present audiovisual content, documents, images, assessments, and more.

Access to this content is granted by logging into the academy with administrator permissions and navigating to an existing course or creating a new one. From there, content can be easily edited or added using the available buttons.

7.2.3. Graphic Catalog

Integration with digital media, such as the chatbot, allows the company to manage catalogs in I-paper format.

This format allows users to directly add products to the shopping cart, creating a shopping experience very similar to buying from a physical catalog.

This I-Paper format integrates with automated tools like the S4DS chatbot and can be sent to the system using any of the major social networks such as WhatsApp, Instagram, or Telegram, among others.

7.3. Intelligence and analysis.

7.3.1. Tracking Tags and Advertising Pixels (Google Tag Manager)

For sales teams, it is crucial to monitor the digital commerce strategy and determine whether digital media advertising is achieving the expected goals of the user conversion sales funnel, which ranges from building brand awareness to making conversions and achieving customer re-purchases and evangelization.

To address this need, S4DS allows you to assign a Google Tag Manager tag that centralizes any pixels or tags from other networks like Facebook.

Using Google Tag Manager enables you to track user behavior and understand which products have been viewed the most, how many users have gone through the checkout process, how many have added shipping and payment information, and finally, how many complete the purchase.

For configuration, you only need to define a platform variable "GOOGLE_TAG_MANAGER_TRACKING_ID" and configure events in Google Tag Manager (tags should be configured by the client).

This is a DEMO of the type of data and information that can be obtained through site usage:

• Audience analysis and traffic sources.

• E-commerce event conversion funnel both from the client's website and the consultants' virtual office.

7.3.2. Reports for Analysis

The teams managing the company's strategy, whether it's marketing or sales, need to be able to analyze the information collected by the system to plan future strategies that have a greater impact in the market.

That's why the platform provides an easily accessible information system, whether on a desktop screen, through a mobile device, or by downloading files for personalized analysis.

• Detailed Sales Analysis

• Loyalty Plan Status

• Product Performance Analysis

• Incentive Winners Reports

.