How to include dynamic custom script to websites through GTM(Google Tag Manager) - Adobe Experience Manager(AEM)
Google Tag Manager is a tag management system that allows you to quickly and easily update tracking codes and related code fragments collectively known as "tags" on your website or mobile app. Once a small segment of Tag Manager code has been added to your project, you can easily configure and deploy your tag configurations from a web-based user interface without the need to deploy additional code in most cases. This reduces errors and frees you from having to involve a developer every time you need to make changes.
This post explains the approach to use Google Tag Manager(GTM) to include the dynamic scripts as part of Adobe Experience Manager(AEM) websites.
Create a free google tag manager account if one is not available
Install the GTM header and body scripts to the AEM website
Copy the head script to the header file and body script to body footer(start of body section)
How to use Attribute Loader in Adobe Search and Promote
This tutorial explains the details on how to use Attribute Loader in Adobe Search and Promote.
Attribute loader help us to provide additional meta data to the URL’s crawled from website.
For example, the PDF’s document crawled from the website will not have any additional metadata specified but the additional metadata can be loaded through Attribute Loader.
e.g while crawling the pdf document from website it will be possible to provide only pdf URL and file name but will not be able to provide the additional details like title, description etc, these additional metadatas can be provided via Attribute Loader.
The values will be merged during indexing through primary key value.
Map the Feed data fields to the Adobe S&P meta data definitions, specify a primary key to map the attribute loader data with the data crawled from other channels e.g website. Here the PDF URL is considered as a primary key, the URL is available through both website and Attribute Loader feed.
The Attribute Loader data is merged to the document based on the primary key during the indexing.
The Attribute Loader data can be previewed after configuration, to preview the Attribute Loader Data — Click on Load Attribute Loader Data then Start Load
Click on Start Load, this will show the preview of the data loaded from the feed
Make sure the Content-Types for the required document types(e.g application/pdf) are selected to enable the crawler to crawl those document types from website — the documents for those the Content Types enabled will be crawled from the website
The Content Types can be enabled from Settings → Crawling →Content Types
Configure the URL entrypoint — website URL from where the documents should be crawled and the URL mask — the matching URL that should be considered for crawling.
Settings →Crawling →URL Entrypoints
The URL mask can be enabled from Settings →Crawling →URL Masks
Run the live index by configuring the website URL entrypoint that has the reference to PDF documents, now the search result displays the metadata provided by Attribute Loader for PDF documents
The Attribute Loader is not enabled by default, this should be enabled in S&P account by your Adobe account representative or by Adobe Support.
The attribute loaders add the capability to provide additional meta data to the documents crawled through a channel that is enabled with limited data.
How to use Index Connector in Adobe Search and Promote
This tutorial explains the details on how to use Index Connector in Adobe Search and Promote.
Index Connector
Index Connector enable us to define additional input sources for indexing XML pages or any kind of feed.
Search and Promote allows us to add the website URL’s as an entry point to crawl the pages for indexing, the URL’s also can be crawled and indexed through Index Connector.(the URL entry points and Index Connectors can be defined together for crawling and indexing)
For example, the Index Connector can be used to index the large number of product data from eCommerce systems to reduce the crawling and indexing time. Index Connector approach provides better crawling/indexing performance.
A XML data feed consists of records corresponds to the individual documents that can be added to the index
A text data feed contains new-line-delimited records corresponds to the individual documents that can be added to the index
Mapping can be enabled to map the feed data to the metadata fields in the resulting index
Multiple protocols can be used to connect to the input feed sources from Index Connector — HTTP(S)/FTP/SFTP/FILE
The IndexConnector is not enabled by default in S&P account, the same should be enabled by Adobe S&P account team.
Define Index Connector
After enabling the Index Connector to the account, the same can be accessed from Settings →Crawling →Index Connector
The feed file is available through HTTP(S) URL — www.example.com/product/feed.xml, the Index Connector can also access the feed through FTP, SFTP and FILE protocol’s.
Enter a name for the Index Connector
Select Type as Feed
Select Enabled
Configure Host Address and File Path
Select the appropriate Protocol
Configure the Timeout and Retries as required
Itemtag — tag represents the individual records
Enable the mapping for the fields from feed file to metadata defined, define a primary key value that will identify each record uniquely.
The configurations can be previewed before adding the Index Connector, click on Preview button
The Index Connector configuration is now ready, enable the Index Connector as URL entry point for crawling and indexing Setting → Crawling → URL Entrypoints
Select the Index Connector defined in the above step from the drop down “ — Add Index Connector Configurations — “
Now the configurations are ready, run a full live index so the new records will be reflected in the search result.
The Index Connector will provide the easy option to index the documents from feed data, this provides better performance during crawling and indexing. The Index connector can be used to index large volume of data for eCommerce systems.
Let us now enable the validation for email fields — the email id field is validated for valid email id. The form should not be submitted if there are at least one email filed is entered with invalid email address.
The email fields should be highlighted in different style for easy identification of validation errors.
Define a cq:ClientLibraryFolder node under the component with the name clientlibs and add the below properties.
extraClientlibs String[] —customvalidation(the client library defined in the previous step)
Author the component to a page
The error message will be displayed if the email address is invalid in the email fields also the email fields will be marked in red border on error, the form will be submitted on correcting all the email issues.
This concludes enabling the custom email validation to the multifield in touch UI dialog’s. The extraClientlibs dialog property can be used to load the custom java script to the dialog’s, the script can handle the appropriate events and handle the filed validation. The script can be customized as required to handle different validation scenarios.
Improve the performance of the Adobe Experience Manager(AEM) websites
This post explains my experience on improving the Adobe Experience Manager(AEM) website performance
"Cache as much as possible" - CDN layer:
The caching is the important thing to be considered for improving the performance, in AEM setup the dispatcher will be used for caching the static content.
The CDN can be added on top of dispatcher to distributed caching to support the caching in different region to provide better performance. As the CDN is distributed at least by region the user will be served from nearby region to improve the performance. in this setup publishers will be only receive the initial request and subsequent request will be served by CDN and dispatcher.
There are multiple CDN options like Akamai and AWS Cloud Front. The request flow diagram below
Cache-Control max-age header:
Specify the cache control header with required max-age value to control the amount of time the files are cached by browser.
Add higher max-age values for static resources so that the browser caching can be used optimaly for bettwr performance.
The max-age can be be added as part of the virtual host configuration. e.g
<filesMatch ".(css|js|)$">
Header set Cache-Control "max-age=2628000"
</filesMatch>
<filesMatch ".(jpg|jpeg|png|gif|html|ico)$">
Header set Cache-Control "max-age=900"
</filesMatch>
Versioning of CSS and JS files:
The performance gain is achieved through browser caching static files for specified time(max-age). The browser cache busting is important to update the modified static files in browser, say the browser has the CSS file cached for one month and you want to change the CSS. You need a strategy for breaking the cache and forcing the browser to download a new copy of the CSS.
Change the version number of the static files upon modification so that the browser cache will be updated with new file irrespective of the max-age configuration.