Saturday, December 15, 2018

How to include dynamic custom script to websites through GTM(Google Tag Manager) - Adobe Experience Manager(AEM)

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

tagmanager-GTM


Install the GTM header and body scripts to the AEM website

tagmanager-GTM


tagmanager-GTM


Copy the head script to the header file and body script to body footer(start of body section)

tagmanager-GTM

tagmanager-GTM

tagmanager-GTM




Thursday, December 6, 2018

How to use Attribute Loader in Adobe Search and Promote

How to use Attribute Loader in Adobe Search and Promote


This post explains the details on Search and Promote Attribute Loader.

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.

PDF URL Crawled from  website - https://www.example.com/test/Albin.pdf

Attribute Loader Data-

url- https://www.example.com/test/Albin.pdf(primary key)
Tittle - test PDF
Description - test PDF

The Attribute Loader is executed before actual indexing and the metadata data values are merged based on the primary key during indexing.

AttributeLoader

Defining Attribute Loader:


AttributeLoader

Sample Feed XML

<attributes xmlns:xs="http://www.w3.org/2001/XMLSchema" version="2.0">
    <channel>
        <title>Attribute Loader Feed</title>
        <Item>
            <title>test PDF1</title>
            <desc>test PDF1</desc>
            <url>https://www.example.com/test/Albin1.pdf</url>
        </Item>
        <Item>
            <title>test PDF2</title>
            <desc>test PDF2</desc>
            <url>https://www.example.com/test/Albin2.pdf</url>
        </Item>
    </channel>
</attributes>
AttributeLoader

AttributeLoader


Tuesday, December 4, 2018

Search&Promote – Crawling(IndexConnector)

Search&Promote – Crawling(IndexConnector)


IndexConnector:


Enable to define additional input sources for indexing XML pages or any kind of feed

The IndexConnector can be used to index the product data from ecommerce systems with large number of product data to reduce the crawling and indexing time. IndexConnector approach better crawling/indexing performance.

An XML data source consists of XML records, that contain information that corresponds to individual documents that can be added to the index

A text data feed contains individual new-line-delimited records that correspond to individual documents that can be added to the index

Mapping can be defined, how each record's items are used to populate the metadata fields in the resulting index

Multiple protocols can be used to connect to the input sources from IndexConnecter – HTTP(S)/FTP/SFTP/FILE

IndexConnector

The IndexConnector is not enabled by default in S&P account, the same should be enabled by Adobe S&P account team.

Defining IndexConnector:


IndexConnector

IndexConnector2.png

Sample product feed file(XML)

<feed
    xmlns:xs="http://www.w3.org/2001/XMLSchema" version="2.0">
    <channel>
        <title>Product Feed</title>
        <Item>
            <link>https://www.example.com/product-title/p/123</link>
            <title>
                <![CDATA[product-title]]>
            </title>
            <pubDate>05/09/2011</pubDate>
            <pubYear>2011</pubYear>
            <description>
                <![CDATA[<p>product description</p>]]>
            </description>
            <productType>Research</productType>
            <category>
                <![CDATA[Financial Planning|Financial Planners|Research]]>
            </category>
            <ProductId>123</ProductId>
            <imageUrl>/content/dam/Images/product/123.jpg</imageUrl>
        </Item>
        <Item>
            <link>https://www.example.com/product-title/p/1234</link>
            <title>
                <![CDATA[product-title]]>
            </title>
            <pubDate>05/09/2011</pubDate>
            <pubYear>2011</pubYear>
            <description>
                <![CDATA[<p>product description</p>]]>
            </description>
            <productType>Research</productType>
            <category>
                <![CDATA[Financial Planning|Financial Planners|Research]]>
            </category>
            <ProductId>1234</ProductId>
            <imageUrl>/content/dam/Images/product/1234.jpg</imageUrl>
        </Item>
        <Item>
            <link>https:/www.example.com/product-title/p/12345</link>
            <title>
                <![CDATA[product-title]]>
            </title>
            <pubDate>05/09/2011</pubDate>
            <pubYear>2011</pubYear>
            <description>
                <![CDATA[<p>product description</p>]]>
            </description>
            <productType>Research</productType>
            <category>
                <![CDATA[Financial Planning|Financial Planners|Research]]>
            </category>
            <ProductId>12345</ProductId>
            <imageUrl>/content/dam/Images/product/12345.jpg</imageUrl>
        </Item>
    </channel>
</feed>


Monday, September 17, 2018

How to Enable Custom Validation on multifield Touch UI - Adobe Experience Manager(AEM)

How to Enable Custom Validation on multifield Touch UI - Adobe Experience Manager(AEM)


This post explain the details on enabling Custom Validation on multifield Touch UI.

Define the Touch UI dialog for the component, the XML structure of the dialog is below

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="63 Collapsible Multifield"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[touchmulti.email.validation]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <products
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        eaem-show-on-collapse="EAEM.showProductName"
                        fieldLabel="Products">
                        <field
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./products">
                            <items jcr:primaryType="nt:unstructured">
                                <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <product
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldDescription="Name of Product"
                                            fieldLabel="Product Name"
                                            name="./product"/>
                                        <email
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                            fieldLabel="Email"
                                            name="./email"/>
                                    </items>
                                </column>
                            </items>
                        </field>
                    </products>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

touch_ui_multifield_dialog


Enable the validation for Email:


The form should not be submitted if there is atleast one error with email.
Error field should be highlighted with different 

Define a cq:ClientLibraryFolder node under the component, name it clientlibs and add the following properties.

categories (String[]) - <define category name> e.g touchmulti.email.validation

touch_ui_multifield_clientlibs_validation


Saturday, September 15, 2018

Improve the performance of the Adobe Experience Manager(AEM) websites

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

network_flow_aem

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. 

The versioning of static resources can be enabled in AEM through "ACS Commons Versioned Clientlibs" - https://adobe-consulting-services.github.io/acs-aem-commons/features/versioned-clientlibs/index.html