AEM: Adobe Analytics integration with Adobe Campaign

Basically Analytics integration for AEM website and mobile app procedure remains same. Below given mobile app procedures.

Adobe campaign: 

Adobe Campaign lets you design and orchestrate targeted and personalized campaigns on multiple channels, such as e-mail, direct mail, SMS, Wap Push, search, social etc.

Adobe Analytics: 

Analytics service provide various levels of views like visitor geo-location, what days they come the most frequently, and how long they’re staying as well as several metrics based on e-commerce data, CRM attributes, engagement, etc

Adobe Analytics data can be used to create effective Adobe campaign across channels. Adobe Analytics & Campaign Combined Together can delver following capabilities.

• Performance measurement in real time
• 360-degree qualification and targeting
• Highly personalized re-marketing

Campaign to Mobile App

The Mobile App Channel lets you use the Adobe Campaign platform to send personalized notifications to iOS and Android terminals via apps. Basically there are two delivery channels available:

• An iOS channel
• An Android channel

--------------Similar Posts:----------

Integrate AEM With DOJO

Integrate AngularJS in AEM

Personalization in AEM

Replication Agents

New AEM Features

-------------------------------------------

There are ways to optout it. The NMAC opt-out management (mobileAppOptOutMgt) workflow updates notification unsubscriptions on mobile devices.

Adobe Campaign is compatible with both binary and HTTP/2 APNS.

To use the functionalities of the Adobe Campaign Mobile App Channel, you need to change/adapt your mobile application to integrate it into the Adobe Campaign platform using Two SDKs (one for android , other for iOS)

How Campaign Collects Data
Action, Event activities support below data collection methods.

1) The Data loading- RDBMS: The Data loading (RDBMS) activity lets you access this external database directly and to collect only the data required for targeting.

2) The Loading- SOAP: The Loading (SOAP) activity is used in addition to the data loading (RDBMS) activity when it is not possible to collect data directly via the FDA in an external database.

3) Data loading (file): The Load (File) activity lets you directly access a source of external data and use it in Adobe Campaign. A scheduler can be run to retrieve the file.

Campaign set up procedure steps are given below. 

Configure connectors
Collecting information (collect the technical specifications which define the set of parameters that enable Adobe Campaign and the mobile application to communicate, like integration key, variables, urls etc)

Creating the service
Adobe Campaign administrator needs to create and configure a service linked to the mobile application

Push Notification services.
APNS (Apple Push Notification Service) for Apple
GCM (Google Cloud Messaging) for Android

Adobe Campaign uses two types of APIs:
•    Generic data access APIs for querying the data model data
•    Business specific APIs that let you act on each object: deliveries, workflows, subscriptions, etc.

Sample WCMUse Java File for AEM

The VehicleService.Java WCMUse class below, build and deploy it using maven to your AEM.

    package com.aem;

    import org.apache.sling.api.SlingHttpServletRequest;
    import com.day.cq.wcm.api.Page;
    import java.util.HashMap;
    import java.util.Map;
    import com.adobe.cq.sightly.WCMUse;

    public class VehicleService extends WCMUse {
        private Map<String, String> map;

        @Override
        public void activate() throws Exception {
            SlingHttpServletRequest request = getRequest();
            Page currentPage = getCurrentPage();
            createVehicleDetails(request, currentPage);
        }


        /**
         * This will Create vehicle map
         *
         * @return
         */
    private void createVehicleDetails(SlingHttpServletRequest request, Page currentPage) {
        map = new HashMap<String, String>();
        map.put("name", "NewVehicle");
        map.put("price", "1000");    
        }

        /**
         * This will return vehicle
         *
         * @return vehicle map
         */
   
        public Map<String,String> getVehicleDetails() {
       
            return map;
        }
   
    }

--------------Similar Posts:----------

Integrate AEM With DOJO

Integrate AngularJS in AEM

Personalization in AEM

Replication Agents

New AEM Features

-------------------------------------------

Integrating the AngularJS Framework into AEM HTL

Integrating the AngularJS Framework into AEM HTL(Sightly) with working example.

I have seen many webpages with similar topic, but complex while we try to replicate it in our local environment. Some times they dont work or quite tough to make it work. Here I am going to take you through an easy Angular JS integration with Sightly.

Note: Please ensure you verify the angular syntax using any online tool when you update the code, because angular is strict on syntax.

What is angular JS?
Angular JS is a JavaScript library that simplifies the creation of powerful components, by extending HTML vocabulary for your application.

Why Angular JS with AEM HTL?
Angular JS is the current trend. When we need to declare dynamic views in web applications to make it extra ordinary powerful, we need Angular JS.

What is the aim of this sample?
Through this demo, you will know how to create a simple angular JS Component which performs below tasks,

1.  - Takes user iput and diplay through angular JS tags
2.  - Takes user click and show an element using angular JS
3.  - User click invokes a backend WCMUse Java file and displays the data through HTL + Angular JS

Steps involved in developing AEM + Angular + HTL Component.

Create a template
    Create a new template as shown below at /apps/htl/templates

Create a folder 'page' at /apps/htl/components
Create a new component at /apps/htl/components/page as shown below

Update the 'templateHTL.jsp' file content at /apps/htl/components/page/templateHTL/templateHTL.jsp with below code.
    <html>
    <%@include file="/libs/foundation/global.jsp" %>
    <cq:include script="/libs/wcm/core/components/init/init.jsp"/>
    <body>
    <h1>Here is your Angular HTL Component</h1>
    <cq:include path="par" resourceType="foundation/components/parsys" />
    </body>
    </html>

Create and render component that uses the template
    Create a component as shown below

 

Go to path /apps/htl/components/angular/angular.html and modify the 'angular.html' with below code
     <div ng-app>
            <p>Enter a value: <input type="text" ng-model="name">
            <p ng-bind="name"></p>
             <div ng-view></div>
            <ul class="menu">
                <li><a ng-click="currentTpl1='/tpl1.html'">Template Load example</a>
                <li><a ng-click="currentTpl1='/tpl2.html'">Show the list of cars</a>
            </ul>
           <div ng-view></div>
            <div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>
            <script type="text/ng-template" id="/tpl1.html">
                <p> First name: <input type="text" ng-model="firstname"/>
                    Last name: <input type="text" ng-model="lastname"/>
                    </p>
                    <p>First name:<p ng-bind="firstname"></p>
                    <p>Last name:<p ng-bind="lastname"></p>
            </script>
            <script type="text/ng-template" id="/tpl2.html"  data-sly-include="template.html">

            </script >
        </div>
 
Create a 'template.html' at path /apps/htl/components/angular

    <div data-sly-use.vehicleService="com.aem.VehicleService" >
      <div data-sly-use.myClass="com.aem.VehicleService" data-sly-unwrap>
        <ul data-sly-list.keyName="${myClass.getVehicleDetails}">
            <li>${keyName}:${myClass.getVehicleDetails[keyName]}</li>
        </ul>
       </div>
    </div>

Create a dialog (create dialog option) at path /apps/htl/components/angular with label 'dialog'

Client Library Creation for AngularJS framework

•     Create a folder 'clientlibs' at /apps/htl/components/angular and Add below two properties to it.

    (name:categories,    Type:String[],     value:cq.widget)
    (name:dependencies, Type:String[],     value:angularjs)

•     Download the latest 'angular.min.js' from angular JS Site
•     Create a file 'angular.min.js' in folder /apps/htl/components/angular/clientlibs; copy paste the downloaded angular.min.js content to this file.
•   Now you have angular JS at your crx in location /apps/htl/components/angular/clientlibs/angular.min.js

•     Create a new file js.txt at /apps/htl/components/angular/clientlibs; open the file 'js.txt' and paste 'angular.min.js' (without quotes) and save it.
•     Now you have a new client library for angular JS. 

•     Add this in your page , open file /apps/htl/components/page/templateHTL/templateHTL.jsp andadd new client library to it by adding line

    <cq:includeClientLib categories="cq.widgets" />


The Folder Structure Now

Create a WCMUse class for data.
    We are creating a map with set of vehicles and populating it using HTL.

    The VehicleService.Java WCMUse class below, build and deploy it using maven to your AEM.

Please find the WCMUse class here. VehicleService.JAVA
 


 
Create a page that uses AngularJS functionality; Code execution

    Open site admin and create a page with template 'templateHTL'. Open it in edit mode.
    Drag and drop the 'angular' component to the newly created page.

    Once you re load the page and start entering anything at 'Enter a Value', you can see the inline option working through angular.

    Code executed:  <p ng-bind="name"></p>

    When you click on 'Template Load example', you can see the new templates on bottom.

    Code executed:

    'On Click' is added at line,
    <li><a ng-click="currentTpl1='/tpl1.html'">Template Load example</a>

    A template place holder is at line,
    <div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>

    Script executed when the teplate got clicked,

     <script type="text/ng-template" id="/tpl1.html">
                <p> First name: <input type="text" ng-model="firstname"/>
                    Last name: <input type="text" ng-model="lastname"/>
                    </p>
                    <p>First name:<p ng-bind="firstname"></p>
                    <p>Last name:<p ng-bind="lastname"></p>
     </script>
     You can also see, on entering first name and second name, again inline in action.

   
     When you clicked on 'Show the list of cars'
     We have the Data coming from WCMUse class now as shown below.

   
     Code executed
     'On Click' is added at line,
     <li><a ng-click="currentTpl1='/tpl2.html'">Show the list of cars</a>
   
     A template place holder is at line,
     <div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>
   
     Which in turn calls the script for template selection from
     <script type="text/ng-template" id="/tpl2.html"  data-sly-include="template.html">

      </script >
   
     This executes the template.html at path /apps/htl/components/angular/template.html

     The template.html executes the WCMUse class and process the data from below code.
    <div data-sly-use.vehicleService="com.aem.VehicleService" >
      <div data-sly-use.myClass="com.aem.VehicleService" data-sly-unwrap>
        <ul data-sly-list.keyName="${myClass.getVehicleDetails}">
            <li>${keyName}:${myClass.getVehicleDetails[keyName]}</li>
        </ul>
       </div>
    </div>

Want the code package?
    Please let me know through e-mail if you need the package.

--------------Similar Posts:----------

Integrate AEM With DOJO

Integrate AngularJS in AEM

Personalization in AEM

Replication Agents

New AEM Features

-------------------------------------------

New Features Adobe Experience Manager(AEM) 6.2

New Features Adobe Experience Manager(AEM) 6.2


VERSION: 6.2, Released on APRIL 21, 2016
Product URL: https://docs.adobe.com/docs/en/aem/6-2.html

Brief:
AEM 6.2 comes with many changes and improvements including forms. AEM 6.2 Forms includes several new features and enhancements that further streamline and enhance creation, publishing, and working with forms, documents, and correspondences.

User Interface Improvements
AEM 6.2 ships with a new user interface that sets up the main modules as a drop down navigation

list. The interface still leverages Coral UI and for the most part, the detailed sections of each module are untouched. A new search box has come up on the top right corner to search also quick access to other solutions in the Marketing Cloud. The product navigation has moved from the side rail to an overlay.

AEM Mobile Apps
The Adobe Digital Publishing Suite and Adobe Phone Gap have been bridged to provide a seamless experience to customers to manage their mobile apps across multiple operating devices. A new dashboard is provided where in we can see all details of mobile applications. The key feature of this new tool allows customers to deploy native applications and leverage the power of Phone Gap to provide native APIs along with the power of DPS to create, manage and publish the content, once synched.

AEM Smart Tags
AEM 6.2 released a Beta functionality called 'Smart Tags' which allows for the system to automatically tag and discover digital assets. It can also be setup to bulk tag assets that are already in the system.

Search  Enhancements
Search enables navigating within the product and search all areas of the product. Prior to 6.2, Adobe

had invested in search capabilities with integrations to SOLR as well as a faceted search user interface in 6.0 and 6.1, but the comprehensive search capabilities provided in 6.2 will surely be most preferred by customers.

Content Fragments
Content creators can now use the power of assets and its referencing capabilities across multiple devices along with variations. The new content fragment section allows content fragments metadata to be created the same way how an asset metadata schema can be created using the Schema Editor.

Template Editor
AEM 6.2 provides set of built in templates. This helps authors to create templates immediately with a set of templates and components developed already. The core features allow content authors to insert components along with initial sets of content to create a structure for it to be leveraged to create pages under Sites. This also provides a user interface for content authors to leverage the Design view of the editor to preview what the template would like on other devices such as ipad and mobile

Asset insights
Assets Insights is a new and interesting feature in AEM 6.2 that allows assets usage to be tracked

across various channels such as websites, email campaigns, mobile devices, etc. Adobe Analytics enables the tracking functionality. The statistics that can be captured are items such as what assets have been downloaded, clicked on, conversion rates and other digital marketing trends, which helps the atuthor to add meta data more effectively.

Areas, Targeting
AEM 6.2 introduces Areas which leverages the power of AEM Multi site Manager. Effectively targeted content and personalization is possible through this. Areas provides a way to manage these personalized content in the same way content is managed for sites across multiple languages and locales. More localized targeting, which allows content authors globally to set up campaigns and also break inheritance if required as in normal hierarchy at specific page levels for local content.

--------------Similar Posts:----------

Integrate AEM With DOJO

Integrate AngularJS in AEM

Personalization in AEM

Replication Agents

New AEM Features

-------------------------------------------

Sightly/ HTL Tips

 Sightly Tips

For SIghtly Tutorial Visit our help page : http://aem-cq-tutorials.blogspot.com/p/htl-home.html

? Sightly comparing a string value
Say we have a string 'heroType' and having some values. We need to test its value to 'AL', we can use below code to compare it.

<div data-sly-test="${style.getHeroType == 'AL' }">Hello</div>

? Check a list's(formatList) size using below code
<sly data-sly-test.emptysize ="${subcategoryUse.formatList.size > 0 }" />

--------------Similar Posts:----------

Integrate AEM With DOJO

Integrate AngularJS in AEM

Personalization in AEM

Replication Agents

New AEM Features

-------------------------------------------

? Check a list item count is greater than zero in sightly
Java List : shopList; Use class : subcategoryUse

<sly data-sly-list.listItem="${subcategoryUse.shopList}">
 <sly data-sly-test.count="${listItemList.index > 0}">
 //Do your task here if count is more than zero
 </sly>

? Passing a value to Use  class from sightly:
 <sly    data-sly-use.integerUse="${'com.....IntegerUse' @ text=item}">

 And in Use class IntegerUse.java read it as,
 String text = get("text", String.class);

 ? Iterating over a list
 Java List: firstList

 <sly data-sly-list="${quantumUse.firstList}">
 //Use list item here using '{item}'
 </sly>

 ? When a Java list contains an object holding multiple values, each value can be retrieved as below
 <a x-cq-linkchecker="valid" href="${listItem.getUrl}.html"><img src="${listItem.getitemImage}" class="image-responsive"></a>
 or
 <p>${listItem.getpriceInteger} <span>${listItem.getpriceDecimal}</span>

 ? Test multiple items in sightly

 <sly data-sly-test="${listItem.selectLogo && listItem.displayLogo}">
 OR
<div data-sly-test="${listItem.selectCategoryBadge.length > 0 && listItem.displayCategoryBadge}"

Integrate DOJO developed website with AEM

Integrate DOJO developed website with AEM

This is basically a migration of one technology to AEM. There are cases when clients wants to replace the backend technology only. AEM can be integrated with any Java script libraries. Here we are showcasing how feasible it is to integrate DOJO developed site in AEM. Adobe Experience Manager implementation requires a technical team that understands the unique development challenges a custom CMS poses. 

Feasibility?

 Dojo is a front end development technique Toolkit by the Dojo Foundation featuring DHTML and AJAX functions. Dojo work well with all of the front end techniques like HTML5, JQuery etc. to use with any backend system/applications. Dojo development requires skilled developers who are good at DOJO and dtl language.

 Dojo can be integrated with AEM through an interaction Layer. AEM exposes many of the methods to integrate with any third-party applications. This enables applications to work seamlessly when integrated. A JSON layer is used to integrate AEM with dojo in this case. 

 Can we migrate a project which runs on DOJO to AEM?

 The asnwer is yes. We can create a package of DOJO front end files (Including .html) to upload into AEM. This can be created either using package manager or through maven build.

 Once this package is ready, it can be directly uploaded into to AEM Package maneger and install. This package may have differnt page setup and locations compared to a normal AEM Project.

 Any Drawbacks?

 Yes, the template, page concept is not involved in this and we are just reusing the existing normal front end html files with DOJO. We can have an authoring environment for authoring the components but the preview is not available since we will have to develop a new page in addition to DOJO Migrated page. Also there may be some Javascript path remapping issues, which we may have to fix once deployed.

 How does the DOJO normal files talk to AEM Backend? 

 We can have a JSON layer which talks between the DOJO and AEM. The authoring environment can invoke the osgi layer to create custom JSON files which DOJO is expecting.

 Integration Details

AEM is used as backend service . OSGi (Open Service Gateway Initiative) is the Java framework which runs on AEM and generates the JSON Layer. The generated JSON layer is used to interact with dojo application. 

 Authoring, JSON Generation.

The data is authored by an author and this gets saved in AEM. User friendly authoring environment allows users to drag and drop the component and immediately start authoring. 

--------------Similar Posts:----------

Integrate AEM With DOJO

Integrate AngularJS in AEM

Personalization in AEM

Replication Agents

New AEM Features

-------------------------------------------

JSON Generation:

Once the component is saved, OSGI runs in AEM helps to generate a JSON. A Java service used to generate OSGI Bundles needs to be created to generate JSON from the authored component. 

Any format of JSON can be generated as per dojo requirement here. Dojo needs to configure above data path of JSON while interacting and generating a page component.

DOJO Layer

We need to move all DOJO Libraries to AEM. Dojo related components and templates to be moved to respective folder of AEM.

Once all settings are done, while reloading the page, UI will be loaded with the respective component by its templates from dojo but content from AEM.

 AEM Project Maintenance w.r.t dojo

New versions of AEM are available so often. Upgrades can be done without much challenges since the front end is separated from backend.

Some of the issues we faced during migration 

Cannot use AEM image rendering concept, since DOJO uses own images and paths.

File name conflicts. Space is there in DOJO

AEM Caching is not used

Deployments are complex

Previews are not possible

Site management becomes complex

Integrate AEM With DOJO

Using DOJO as AEM Front end

There are some cases where AEM needs to be integrated with DOJO.

What is DOJO
DOJO is a Javascript framework used to develop interactive, responsive websites, and mainly used as a UI tool.

DOJO can be integrated with AEM through an interaction Layer. AEM exposes many of the methods to integrate with any third-party applications. This enables applications to work seamlessly when integrated. A JSON layer is used to integrate AEM with DOJO in this analysis.

DOJO with AEM - Arch view
The architectural diagram is shown below.

OSGi (Open Service Gateway Initiative) is the Java framework which runs on AEM and generates the JSON Layer. The generated JSON layer is used to interact with DOJO application.

Once the component is saved, OSGI runs in AEM which helps to generate a JSON. A Java service used to generate OSGI Bundles needs to be created to generate JSON from the authored component.
Any format of JSON can be generated as per DOJO requirement here. A sample JSON response is given below.

http://localhost:4502/content/home/_jcr_content/parsys/myothercomponent.data.json

Steps to integrate DOJO with AEM:

We need to move all DOJO Libraries to AEM.
DOJO related components and templates to be moved to respective folder of AEM.
The page level items are split into templates and components. Same DOJO structure needs to be replicated in AEM, where in page will be divided into header, body, footer components. Content section can hold any levels of other components. The page structure in AEM is shown below.


Any impact on AEM Project Maintenance with respect to DOJO
New versions of AEM are available so often. Upgrades can be done without much challenges since the front end is separated from backend.


--------------Similar Posts:----------

Integrate AEM With DOJO

Integrate AngularJS in AEM

Personalization in AEM

Replication Agents

New AEM Features

-------------------------------------------