Do you want to capture or display additional user or site data on your site? It can be tricky if you need more information like where the user came from, the page URL, or want to capture the logged-in user's Name or Email address automatically. All of these things can be tracked efficiently with the help of Smart Tags.
This tutorial will show you how to use Smart Tags in Tassos extensions.
What is a Smart Tag?
A Smart Tag is a small piece of code that can be used in the settings of any Tassos extension that provides you valuable information about almost everything related to the moment the page is rendered. Smart Tags use curly brackets and look something like this:
{smart_tag}Smart Tags Index
Here's a list of all supported Smart Tags.
- Site
- Page
- Joomla User
- Joomla Content
- Visitor Technology
- Geolocation
- Date Time
- Utilities
- Integrations
Site
Here, you will find a list of Smart Tags that return information about the site.
{site.email}
Returns the site's email address as set in the Joomla Global Configuration page.
{site.name}
Returns the site's name as set in the Joomla Global Configuration page.
{site.url}
Returns the site's base URL. An example of a base URL would be http://www.tassos.gr
Page
Here, you will find a list of Smart Tags containing information about the page being browsed.
{url}
It returns the complete URL of the page, including the query string.
Example:
https://www.site.com/blog/?category=123{url.path}
It returns the page URL without the query string. Example:
Example:
https://www.site.com/blog/{url.encoded}
It returns the complete URL of the page, including the query string, but encoded. For instance, if the current URL is https://www.site.com/blog/?category=123 the Smart Tag will return https%3A%2F%2Fwww.site.com%2Fblog%2F%3Fcategory%3D123. This is useful when you want to pass the URL as a parameter in another URL.
{page.title}
It returns the title of the page. If the page is behind a Menu Item, its Browser Page Title will be returned if not empty; otherwise, it falls back to the title of the Menu Item. If you want to display the title of a Joomla Article, use the {article.title} Smart Tag instead.
{page.desc}
It returns the page’s meta description. If the page is a Joomla Article with a meta description set, it will be returned. Otherwise, it falls back to the menu item’s page meta description.
{page.lang}
It returns the language code of the page. For example, if the page’s language is English or Greek, expect en-gb and el-GR as the returned value, respectively.
{page.langurl}
It returns the first part of the language code of the page. For example, if the page’s language is English or Greek, expect en and el as the returned value, respectively.
{page.generator}
Returns the value of the generator meta tag.
{page.browsertitle}
Returns the menu item’s Browser Page Title option even if it is empty.
{querystring.KEY}
Returns the value of a URL query string parameter as found in the $_GET superglobal array. For example, if the page URL is http://example.com/page.php?key1=red&key2=blue, the {querystring.key2} Smart Tag will return blue.
{post.KEY}
Returns the value of a post data as found in the $_POST superglobal array. For example, if you submit a form that consists of the “email” and “name” input fields, you can use {post.email} and {post.name} Smart Tags in the submitted URL to retrieve the value of any form input.
Joomla User
Use the {user} Smart Tags to retrieve information about the currently logged-in user. This Smart Tag can return the value of any property from the Joomla User object as long as you know the property's name.
Syntax:
{user.USER_PROPERTY}Below is a list of the most popular Smart Tags in this category.
{user.id}
Returns the ID of the user.
{user.name}
Returns the name of the user.
{user.firstname}
Returns the first name of the user.
{user.lastname}
Returns the last name of the user.
{user.login}
Returns the username of the user.
{user.email}
Returns the email address of the user.
{user.registerDate}
Returns the registration date of the user.
{user.field.FIELD_NAME}
Returns the value of a user custom field. Replace FIELD_NAME with the name of the custom field.
Notes
- All Smart Tags in this set will return an empty string if the user is not logged in.
- For security purposes, the “password” property can’t be accessed.
Joomla Content
Use the {article} Smart Tags to retrieve information about a Joomla article. This Smart Tag can return the value of any property from the Joomla Article object, including custom fields, as long as you know the property's name. It can access details from the current browsing article and any article by providing the article's ID using the –id property.
Syntax:
{article.PROPERTY [–id=ARTICLE_ID]}Replace PROPERTY with the name of the property from the article's object. To pull the property from a specific article, provide the --id option and replace ARTICLE_ID with the article's ID. Omit the --id option to use the currently browsing article.
Below is a list of this category's most popular Smart Tags.
{article.id}
Returns the ID of the article.
{article.title}
Returns the title of the article.
{article.alias}
Returns the alias of the article.
{article.link}
Returns the SEF URL of the article.
{article.field}
Returns the value of an article custom field and any property from the field object, such as the title or the id.
Syntax:
{article.field.NAME.[PROPERTY] [–id=ARTICLE_ID]}Replace NAME with the name of the custom field. To pull the custom field value from a specific article, provide the --id option and replace ARTICLE_ID with the article's ID. Omit the --id option to use the currently browsing article.
For instance, let's say you have the custom field with the name "favoriteColor". To return its prepared value from the article with ID 150, use:
{article.field.favoriteColor –id=150}To return the field's raw value, use:
{article.field.favoriteColor.rawvalue –id=150}To return the field's ID, use:
{article.field.favoriteColor.id –id=150}Visitor Technology
This set of Smart Tags returns information about the visitor’s used technology, such as the the device and the operating system used to browse the site.
{client.device}
Returns the type of the device of the user. Possible values:
- desktop
- mobile
- tablet
{client.os}
Returns the operating system of the user. Possible values:
- windows
- windows phone
- iphone
- ipad
- ipod
- mac
- blackberry
- android
- android tablet
- linux
{client.browser}
Returns the name of the browser of the user. Possible values:
- ie
- firefox
- chrome
- safari
- opera
- edge
{client.useragent}
Returns the user agent string of the user.
Example:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36{client.id}
Returns the 8-character hexadecimal ID representing the visitor's unique ID as stored in the nrid cookie in the visitor’s browser.
Example:
03bc431d0d605ce4Geolocation
This set of Smart Tags returns information about the visitor’s physical location. For this Smart Tags work, the Geolocation features must be enabled.
{geo.country}
Returns the visitor's country name. Eg: Greece.
The value of this Smart Tag supports translations via the NR_COUNTRY_[COUNTRY_CODE] language string.
{geo.countrycode}
Returns the visitor's country code. Eg: GR
{geo.city}
Returns the visitor's city name. Eg: Athens
{geo.region}
Returns the visitor's region.
{geo.location}
Return the visitor's geolocation (Country, City, Region).
Date Time
This set of Smart Tags returns information about the current date time respecting the timezone selected in the site’s global configuration.
{date}
Returns the current date time in format Y-m-d H:i:s. Eg: 2023-09-12 11:22:52.
To output the date with a custom format, pass the –format=FORMAT_OPTIONS option. List of available format characters.
- To output a date as 09/12/2023 use, {date --format=m/d/Y}
- To output a date as Tue, 12 Sep 2023, use {date --format=D, d M Y}
{day}
Returns the numeric representation of a day of the month without leading zeros. Eg: 22.
Use the {date} Smart Tag to output the current date of the week in another format. Examples:
- Day of the month, two digits with leading zeros such as 01 or 31. {date –format=d}
- A textual representation of a day, three letters, such as Mon or Sun. {date –format=D}
- A full textual representation of the day of the week, such as Sunday or Monday. {date –format=l} (lowercase 'L')
- ISO 8601 numeric representation of the day of the week, such as 1 (for Monday) through 7 (for Sunday). {date –format=N}
- Numeric representation of the day of the week, 0 (for Sunday) through 6 (for Saturday). {date –format=w}
- The day of the year (starting from 0) 0 through 365. {date –format=z}
{month}
Returns the numeric representation of the month without leading zeros. Eg: 5.
Use the {date} Smart Tag to output the current month in another format. Examples:
- A full textual representation of a month, such as January or March: {date –format=F}
- Numeric representation of a month, with leading zeros such as 01 or 12. {date –format=m}
- A short textual representation of a month, three letters, such as Jan or Dec. {date –format=M}
{year}
Returns a 4-digit numeric representation of the year. Eg: 2023. To output a 2-digit year, use {date --format=y}
{time}
Returns a 24-hour format of an hour with leading zeros. Eg: 20:30.
Utilities
This Smart Tags category consists of helper Smart Tags, such as retrieving the value of a cookie name, the visitor’s IP address, or even crawling the DOM.
{cookie.COOKIE_NAME}
Returns the value of a cookie as stored in the visitor’s browser. Replace COOKIE_NAME with the name of the cookie.
{language.CONSTANT}
Returns the text of a language string. Replace CONSTANT with the language constant you want to return its text. For instance, to return the text of the language string COM_CONTACT_DETAILS, use {language.COM_CONTACT_DETAILS}.
{ip}
Returns the IP address of the visitor.
{referrer}
Returns the webpage URL where a person clicked a link that sent them to your site.
{randomid}
Returns an 8-character hexadecimal random ID. Example: 03bc431d0d605ce4.
{crawler}
Returns the value of a DOM element represented by a CSS selector. For instance, to get the div's text with a class “.phone”, use {crawler –selector=.phone}.
This Smart Tag supports the following functions:
- Return the text of a DOM element
Syntax: {crawler --selector=selector [--fallback=value]} - Return the HTML of a DOM element
Syntax: {crawler.html --selector=selector [--fallback=value]} - Return the Inner HTML of a DOM element
Syntax: {crawler.html --selector=selector --innerhtml=true [--fallback=value]} - Return the number of elements found
{crawler.count --selector=selector [--fallback=value]}
Note: If this Smart Tag is called before the onAfterRender event and the given CSS selector represents elements in the module's output, no nodes are likely found because the module's output still needs to be rendered.
To learn more details about CSS Selectors, visit: https://www.w3schools.com/cssref/css_selectors.php
Integrations
Below is a list of Smart Tags for 3rd party Joomla Extensions.
{acymailing.subscriberscount}
Returns the total number of subscribers of a specific list.
Syntax:/p>
{acymailing.subscriberscount –list=LIST_ID}For instance, to count the subscribers for the list with ID 5, use {acymailing.subscriberscount –list=5}
Smart Tags Global Options
Below is a list of options that can be used across all Smart Tags.
–layout
By default, all Smart Tags return a plain text value. For instance, the {device} Smart Tag will output “desktop” on desktop users. What if you want to wrap the value with a div and make it bold?
To do so, you can write
{device --layout=<div><strong>%value%</strong></div>}The layout option expects a text or HTML with the %value% variable representing the Smart Tag value.
You may think that you don’t need this option as you can get the same result by just inserting the HTML and shortcode directly in the page like:
<div><strong>{device}</strong></div>You have a point that will work, but the main drawback of this method is that the outer HTML will be outputted in the page even if the Smart Tag returns an empty string. You will be left with orphaned HTML tags if the Smart Tag cannot determine the device type. This may result in an undesired behavior. The layout option solves this issue by outputting the shortcode value only if it is not empty.
Smart Tags Rules
- You can use nested Smart Tags.
- You can use the same Smart Tags multiple times on the page without worrying about performance issues, as Smart Tags use caching.