A content goal checks if an element with a specific CSS selector exist on the page the visitor is currently on, and if so registers this as a conversion. This is very handy if you for example want to see if visitors goes to a specific page of the website and you are unable to set a page goal for this (use the URL).
To set this up first open goals and then choose if this is suppose to be a website goal or a project goal. Then click Add new goal and enter a name for this goal. Then choose Content goal in the dropdown. Now this is asking for a CSS selector as a value. Easiest way to fugure out the CSS selecor for your intended element is to use the browsers dev tools and look it up.
So 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.
Go back to the editor and the goal settings. Now paste the class name into the first input field. Classes are annotated by a dot ( . ) before the name and ID's by a hashtag ( # ) before the name. So add the correct character before the class name and now you got a CSS selector.
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 goal you need to go through some steps to check this. This is important because if you set this wrongly, you might register visits on pages that you do not wish to track just because they contain an element that have the same CSS selector.
Goals are registered when the visitor satisfies the set up task (in this case, if an element with the specified CSS selector exist on the page the visitor is currently on) 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 goal might register visits 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. In this case this does not matter because they are on the same page as out target element.
This however is a strong indication that we should check pages where other buy buttons might exist (PLP (Product listing pages), search result page, start page, campaing pages etc.) because there is a good chance that the element will exist on those as well and we probably don't want to target all those pages as well.
So we need to set a stronger (more narrow) CSS selector. We 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 we 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 we still get multiple hits we 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. Then we also go to all these other pages with buy buttons and see that we do not get the Goal satisfied popup on those pages.