Creating custom events

In addition to all the plugin integrations Conversion Bridge has available for one-click conversion tracking, you can also track any custom events that users may take on your site. You can configure a conversion for any of the following:

• Click on any element
• Scroll to any element
• JavaScript event on any element (including document)
• Time on page

Finding your CSS selector

The first step for creating most custom events will be to set the CSS selector to associate the event with. If you are wanting to track when a specific button is clicked, we need to set the unique

In Google Chrome

1. Open Developer Tools: Right-click on the part of the webpage you’re interested in, and select “Inspect.” This opens the Developer Tools.
2. Highlight the Element: In the Elements tab, you’ll see the HTML code for the page. Hover over the parts of the code to see them highlighted on the webpage.
3. Find the CSS Selector: Once you find the HTML element you’re interested in, right-click on it in the Elements tab. Go to “Copy” and then select “Copy selector.” This copies the CSS selector to your clipboard.

In Safari

1. Enable Developer Menu: First, make sure the Developer menu is enabled. Go to Safari > Preferences > Advanced and check “Show Develop menu in menu bar.”
2. Open Web Inspector: Right-click on the part of the webpage you want to inspect, and select “Inspect Element.” This opens the Web Inspector.
3. Select the Element: In the Elements panel, you’ll see the page’s HTML. Hover over the HTML code to find the element you need.
4. Copy the CSS Selector: Right-click on the HTML element in the Elements panel, go to “Copy” > “Copy Selector” to get the CSS selector.

Creating your custom event

Now that you have your CSS selector, you now need to set the other options for the event, including:

• Label (required) – What appears in your analytics platform
• Value (optional) – Passed to your analytics platform (if supported)
• Page – Which page (or entire site) do you want to look for this event to happen

If you are working with a JavaScript event that is attached to the “document”, you can use “document” as the selector.

The Time on Page Events

The “Time on Page” event type allows you to send a custom event whenever a visitor is on a single page more than the set time. This event type does not need a CSS selector. The time is set in seconds.