On a click goal you need to set the CSS Selector to the element you want to target. Easiest way to do this is by using the browsers dev tools.
Open up a Preview of your project from the editor. Navigate to a page where the element you wish to set your goal on exist. Now right click this element and choose Inspect from the menu.
This will open up dev tools and show you the HTML DOM, which is the structure of your website. The element you chose to inspect will be marked. You will now have to look at this element and see if has either a Class or an ID that you think might be unique for this element.
In the example above we've inspected the Add to cart button (see image). This element has a class named buyButton. This seems rather unique. Copy this class name by dubble clicking the name to mark it and then either hit Ctrl+c (or Cmd + c on Mac) or right click and choose copy in the popup menu.
We can now use the class name to target clicks on that button. Open up Goals in the editor and click on Project goals. Now click Add new goal and enter a name for this goal. Select Click goal from the dropdown and then paste the copied class name in the first input field. Classes are annotated by a dot ( . ) before the name and ID's by a hashtag ( # ) before the name.
In the example above we have added a dot before the class name (see image).
How to make sure the element is unique
To really make sure that you've selected an unique CSS selector for your click goal you need to go through some steps to check this. This is important because if you set this wrongly, you might track clicks on elements that you do not wish to track just because they have the same CSS selector.
Goals are registered when the visitor satisfies the set up task (in this case, click on the element with the specified CSS selector) after Audience has been true once that session. This means that goals might be registered all over the website if Audience has been true for the visitor and the visitor then satisfy a goal statement.
This means that a wrongly set up click goal might register clicks on more pages than you want if that element (with the set up CSS selector) exist on other pages as well.
Check the current page
Check that the CSS selector is unique for your element on the current page. To do this, copy the entered CSS selector from your goal and search for this selector in dev tools. You do this by clicking anywhere in the DOM tree (in dev tools) and then hit Ctrl + f (or Cmd + f on Mac). If the selector isn't already entered in the search field at the bottom of the page, paste it to peform the search. Now you will see how many hits you get. If you are lucky you only get one hit and that's the end of that check.
If you get multiple hits, you need to check these elements, and find out if you want to include or exclude them in the target. Use the arrows or hit Enter to go through these.
In the example above we also got hits on our related products listing that are further down the same page.
This would be fine if we'd wish to target clicks on any buy button on the page, or if you for example have set a goal on a PLP (Product listing page) and you do want to register clicks on the buy button of any of the listed products.
However in this case we only only want to target the buy button of the main product on the PDP so here we need to set a stronger (more narrow) CSS selector. You do this by adding class names or ID's of the current element's parent element(s) (that are higher up in the hierarchy).
So start looking at the element's parent element and see if it has a class or an ID you can use and then add that in the search field (with a space in between the two) before the previous elements CSS selector and do a new search. If you still get multiple hits repeat this and go furher up the DOM tree.
In the image above we've set a stronger CSS selector and searched for that and now we only get one hit. So this CSS selecor is unique (at least for this page). So we change the selector in our goal to this stronger selector and then we test that this works and we get the Goal satisfied popup.
Check other pages of the website
So you've confimed that the goal works on the page that you first set it up on. Now you need to check that this doesn't target elements on pages where you don't want it to.
If you've set a fairly strong selector this probably won't be an issue, but you need to be certain, otherwise the statistics will be inaccurate.
The easiest way to check that this does not target elements you do not wish to target is to go to pages where a similar element that you've set in your click goal exist and try to search for this CSS selector in dev tools. You can also click these elements and see that the goal satisfied popup does not appear.
In the example with the goal set on the buy button on PDP (Product detal pages), the first pages we would check are pages where other buy buttons might exist (PLP (Product listing pages), search result page, start page, campaing pages etc.)
Notice:
If you don't get a goal satisfied popup when you test your goal and you are certain that you've set this up correctly you might need to set this up as a custom goal.