Arbitrary IDs for Core Teaser CTAs for Analytics

[JohnPurchaseSB]

You can give a Teaser, like the rest of the core components an arbitrary ID, which also shows up in the data layer. This is useful for identifying the things you'd like to track. Unfortunately this only happens at the component level. For something like a CTA that can be added to a Teaser component, an ID is generated.

You can see an example of this on wknd.site. If I inspect the teaser on the first slide on the home page..

...you can see its ID, "teaser-2122a9f81a-cta-6b28b693be"
The first part, teaser-2122a9f81a" can be arbitrarily changed by adding an ID to the teaser in question. But can the second part be altered somehow?
If I look at the even generated in the data layer when this is clicked, I again see this ID.

But this doesn't seem like a great ID to identify an obvious clickable item; an arbitrary, intuitive ID would be much better. What are people doing when a site owner comes and says they want an analytics report for the View Trips button clicks? Does a developer have to do that mapping to the generated ID, or is there a better way to handle this?

[konstantyn_diachenko · Accepted solution]

Hi @JohnPurchaseSB ,

I checked Teaser v1 and v2 Sling Models and figured out that there is a room of customization for CTA button IDs without sling models refactoring, because, firstly, current implementation tries to read id property of the CTA action resource and, secondly, if it is not existing, it will generate a name like: teaser-2122a9f81a0-cta-6b28b69e.

Check the com.adobe.cq.wcm.core.components.internal.models.v1.TeaserImpl.Action and its getId() method.

    public String getId() {
            if (ctaId == null) {
                ctaId = Optional.ofNullable(ctaResource.getValueMap().get(com.adobe.cq.wcm.core.components.models.Component.PN_ID, String.class))
                    .filter(StringUtils::isNotEmpty)
                    .map(id -> StringUtils.replace(StringUtils.normalizeSpace(StringUtils.trim(id)), " ", ID_SEPARATOR))
                    .orElseGet(() ->
                        ComponentUtils.generateId(StringUtils.join(ctaParentId, ID_SEPARATOR, CTA_ID_PREFIX), this.ctaResource.getPath())
                    );
            }
            return ctaId;
        }

According to this code, it turns out that you can define an ./id property for every CTA resource for the teaser. Usually, ctas buttons are persisted under ./teaser/actions/item0, ./teaser/actions/item1 etc

If you proxy Teaser component, you can extend teaser action dialog configuration with a text field for an id. Use the following example of dialog overlay:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Teaser"
          sling:resourceType="cq/gui/components/authoring/dialog"
          extraClientlibs="[core.wcm.components.teaser.v2.editor,core.wcm.components.image.v3.editor]"
          helpPath="https://www.adobe.com/go/aem_cmp_teaser_v2"
          trackingFeature="core-components:teaser:v2">
    <content jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <actions jcr:primaryType="nt:unstructured">
                        <items jcr:primaryType="nt:unstructured">
                            <columns jcr:primaryType="nt:unstructured">
                                <items jcr:primaryType="nt:unstructured">
                                    <column jcr:primaryType="nt:unstructured">
                                        <items jcr:primaryType="nt:unstructured">
                                            <actions jcr:primaryType="nt:unstructured">
                                                <field jcr:primaryType="nt:unstructured">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <id
                                                            granite:class="cmp-teaser__editor-actionField-id"
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                            emptyText="ID"
                                                            name="id"
                                                            required="{Boolean}false">
                                                            <granite:data
                                                                jcr:primaryType="nt:unstructured"
                                                                cmp-teaser-v2-dialog-edit-hook="actionId"/>
                                                        </id>
                                                    </items>
                                                </field>
                                            </actions>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </actions>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

[JohnPurchaseSB]

Hi Kostiantyn.
Thanks for your details for customization. I was hoping I was just missing something simple, but this at least confirms that I wasn't.