Skip to main content

AEM Custom Rating Component

article banner

This article will help to learn how to create a custom Rating Component which is integrated with Google Analytics to track data.

Objective

  • Understand how to create a custom component in AEM.
  • Understand how to integrate Google Analytics with a custom component.

What you will build

A simple Rating component will be built, which will take input from the radio buttons. Depending on user selection, data will be tracked using Google Analytics.

Pre-Requisites

  • AEM SDK Author
  • Java JDK
  • Eclipse
  • Maven

Define the Rating Component

  • 1. Create a custom component under defined project hierarchy.

Ex : /apps/wknd/components/rating

AEM Custom Rating Component

Create the html file under the component. /apps/wknd/components/rating/rating.html

AEM Custom Rating Component

  • 2. Add the cq:dialog node to the rating component. /apps/wknd/components/rating/cq:dialog

AEM Custom Rating Component

  • 3. The node structure will look like this in CRX:

AEM Custom Rating Component

  • 4. Create a Page in the content Sites hierarchy and give the title to the Page.

AEM Custom Rating Component

Page is created under /content/wknd/us/en.

Once the page is created, click on edit template and add the component you want to add on the page.

AEM Custom Rating Component

  • 5. Click on the policy icon for the Layout container, add the component to the corresponding policy and save.

AEM Custom Rating Component

AEM Custom Rating Component

  • 6. Once we save and refresh the page we can add the rating component on the Page.

AEM Custom Rating Component

  • 7. Once added, the component would look something like this on the Page.

AEM Custom Rating Component

  • 8. Now, to add Google Analytics to the component whenever user clicks on any of the options, add the Script to rating.html

The new code for rating.html would look something like

AEM Custom Rating Component

  • 9. Save the code and refresh the page. Check the page in “view as published” mode.
  • 10. Add the GA debug extension to the browser and switch it on. Once the GA debug is ON, you can see few logs in the console.

AEM Custom Rating Component

  • 11. Click on “yes” or “no” on the rating component and you can see the logs for the rating component in the console.

Ex : If we clicked on Yes, could see the value added to the data layer on GA.

AEM Custom Rating Component

Hence, we can see the achieved functionality of integrating GA to our Rating component is completed. This way we learned how to create custom component to be used with GA for tracking data.

Anshul Agarwal
Anshul Agarwal

Hi, I am Anshul. I am a AEM developer with 5+ years of experience in IT Industry and is responsible for the design and development of services and applications using the AEM system. I know how to design, code, test, correct and document complex programs and program modifications from supplied specifications to achieve well-engineered result. I have experience of the full software development lifecycle with a focus on Agile processes. I am a self-motivated person and a continuous learner, likes to keep the team motivated for the work. Supportive, friendly and a hard working person.

Related reads.

WHAT WE DO.

Explore our wide gamut of digital transformation capabilities and our work across industries.

Explore