Saturday, December 15, 2018

Different approaches to dynamically include custom scripts into websites - Adobe Experience Manager(AEM)

Different approaches to include custom scripts dynamically into websites - Adobe Experience Manager(AEM)


Sometimes we may need to include scripts dynamically into the websites with out changing the code, this post will explain the different approaches to include the scripts dynamically in the websites without performing the code changes.

Tag Manager:


Inject the custom scripts remotely through tag manager systems, this will provide better management of tags without changing the code.

GTM(Google Tag Manager) - Refer https://www.albinsblog.com/2018/12/how-to-include-dynamic-custom-scripts-website-gtm.html for details on injecting the custom script through GTM.

AdobeLaunch-Refer https://www.albinsblog.com/2018/12/how-to-include-dynamic-custom-scripts-adobe-launch-aem.html for details on injecting the custom script through Adobe Launch.

AEM Cloud configuration:


This approach uses the custom AEM Cloud Configuration to include the dynamic scripts - header and footer to the website

Define a Cloud configuration to enable the header and footer scripts and attach the cloud configuration to the required websites to inject the custom dynamic scripts.

Steps-

In CRXDE Lite, create a new node under /apps:

Name: utilities
Type: nt:folder

Create 2 new nodes under /apps/utilities:

Name: components
Type: sling:Folder
and
Name: templates
Type: sling:Folder

Right click on /apps/utilities/components, create a new component genericscriptpage

Label - genericscriptpage
Title - genericscriptpage

group - .hiddenSuperType-cq/cloudserviceconfigs/components/configpage

Add the below additional properties

cq:defaultView - html
allowedParents - utilities/templates/genericscript

Remove the default genericscriptpage.jsp and create content.jsp file under /apps/utilities/components/genericscriptpage with the following content

<%@page session="false" 
  contentType="text/html"
  pageEncoding="utf-8"%><%
%><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%

%><cq:defineObjects/>
<div>
    <h3>General Script Settings</h3>   
    <ul>
<li><div class="li-bullet"><strong>Head Script: </strong><br><%= xssAPI.encodeForHTML(properties.get("headScript", "")).replaceAll("\\&\\#xa;","<br>") %></div></li>
<li><div class="li-bullet"><strong>Foot Script: </strong><br><%= xssAPI.encodeForHTML(properties.get("footScript", "")).replaceAll("\\&\\#xa;","<br>") %></div></li>
    </ul>
</div>

dynamic-script-aem


Create a new node under/apps/utilities/components/genericscriptpage/:

Name: dialog
Type: cq:Dialog

Properties:

title - Generic Script Configuration
xtype - dialog

Create a new node under/apps/utilities/components/genericscriptpage/dialog:

Name: items
Type: cq:WidgetCollection

Create a new node under /apps/utilities/components/genericscriptpage/dialog/items:

Name: panel
Type: cq:Panel

Properties:

title - Script Configuration
xtype - panel

Create a new node under /apps/utilities/components/genericscriptpage/dialog/items/panel:

Name: items
Type: cq:WidgetCollection

Create a new node headScript under /apps/utilities/components/genericscriptpage/dialog/items/panel/items
Name: headScript
Type: cq:widget

Properties:

fieldLabel - Head Script
name - ./headScript
xtype - textarea

Create a new node footScript under /apps/utilities/components/genericscriptpage/dialog/items/panel/items

Name: footScript
Type: cq:widget

Properties:

fieldLabel - Foot Script
name - ./footScript
xtype - textarea

Create a new component genericscript under /apps/utilities/components

Label - genericscript
Title - genericscript

Remove the default file genericscript.jsp, create a file headScript.jsp and add the below content 

<%--

--%><%@page session="false" 
import="org.apache.sling.api.resource.Resource,
                org.apache.sling.api.resource.ValueMap,
                org.apache.sling.api.resource.ResourceUtil,
                com.day.cq.wcm.webservicesupport.Configuration,
                com.day.cq.wcm.webservicesupport.ConfigurationManager" %><%
%><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%
%><cq:defineObjects/><%

String[] services = pageProperties.getInherited("cq:cloudserviceconfigs", new String[]{});
ConfigurationManager cfgMgr = resource.getResourceResolver().adaptTo(ConfigurationManager.class);
if(cfgMgr != null) {
String scriptCode = null;
Configuration cfg = cfgMgr.getConfiguration("generic-script", services);
if(cfg != null) {
scriptCode = cfg.get("headScript", null);
}

if(scriptCode != null) {

%><%= scriptCode %><%

}
}
%>


Create a file footScript.jsp with following content under /apps/utilities/components/genericscript 

<%--

--%><%@page session="false" 
import="org.apache.sling.api.resource.Resource,
                org.apache.sling.api.resource.ValueMap,
                org.apache.sling.api.resource.ResourceUtil,
                com.day.cq.wcm.webservicesupport.Configuration,
                com.day.cq.wcm.webservicesupport.ConfigurationManager" %><%
%><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%
%><cq:defineObjects/><%

String[] services = pageProperties.getInherited("cq:cloudserviceconfigs", new String[]{});
ConfigurationManager cfgMgr = resource.getResourceResolver().adaptTo(ConfigurationManager.class);
if(cfgMgr != null) {
String scriptCode = null;
Configuration cfg = cfgMgr.getConfiguration("generic-script", services);
if(cfg != null) {
scriptCode = cfg.get("footScript", null);
}

if(scriptCode != null) {

%><%= scriptCode %><%

}
}
%>
dynamic-script-aem




How to include dynamic custom script to websites through Adobe Launch - Adobe Experience Manager(AEM)

How to include dynamic custom script to websites through Adobe Launch - Adobe Experience Manager(AEM)

Launch, by Adobe is a next-generation tag management system that unifies the client-side marketing ecosystem by empowering developers to build integrations on a robust, extensible platform that partners, clients, and the broader industry can build on and contribute to.

Adobe Launch is the upgraded version of Adobe’s Dynamic Tag Manager (DTM), Adobe’s Dynamic Tag Manager (DTM) will be replaced by Adobe Launch(It doesn’t mean the platform will be shut down anytime soon).

This post explains the approach to use Adobe Launch to include the dynamic scripts as part of Adobe Experience Manager(AEM) websites.

Login to Adobe Launch and create new property- LAUNCH_CUSTOM_SCRIPT, specify the domain as localhost.local for localhost testing and Save the Property.

Adobe_Launch_aem_integration

Define New Rule:


Adobe_Launch_aem_integration

Configure the Event

Adobe_Launch_aem_integration

Configure the Action

Adobe_Launch_aem_integration

Define the script in Editor

Adobe_Launch_aem_integration

var s = document.createElement("script");
s.innerHTML = "alert('Custom Script from GTM');"; // add the custom script content
  //s.src="test.js";// specify the script file instead of script content
document.head.appendChild(s);

Adding multi line script - example

s.innerHTML = "document.onreadystatechange = function(){ "+
    "if(document.readyState=='loaded' || document.readyState=='complete') "+
        "alert('test');"+
"}";



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>