How to create a click on image link goal in jExperience

Question

With jExperience, you can create a "click on link" goal whereby you can track the users who clicked the link as mentioned in this documentation. As mentioned in the documentation, it is required that the link has an HTML ID or HTML name so that it can be selected by jExperience. However, this might not work correctly with image links such as:

<a href="targeturl" id="test"><img alt="test" src="/files/{workspace}/sites/digitall/files/file1.png" style="width: 465px; height: 661px;"/></a>

Is there a way to get this work?

Answer

To enable jExperience to work correctly with image links goals, the image can be defined with an inner CSS style similar to the below:

<a href="https://targeturl" id="my-link" name="my-link" 
style="background-image: url("/files/{workspace}/sites/digitall/files/images/myimage.png";);display: block;text-indent: -9999px; margin: 0 auto;width: 180px;height: 150px;">Click here</a>