In this guide we’re going to show you how you can have your website automatically recognize any click on any element anywhere on your WordPress site, and send it as an event to your Emercury account. This is crucial if you want to utilize the full power of behavior-triggered automations in Emercury.

Also, please don't let the length of this article scare you. It only takes a couple of minutes to define a click event the first time you follow this guide. And after that it will take you about 30 seconds each time.

Side note: Events will reach Emercury even if they are performed by “anonymous visitors.” This is a visitor that you have not “identified” to Emercury.

There are only 2 things you need to do in order to be able to capture the click on any element and then send it to Emercury

No don’t worry, you don’t need to create one from scratch. We already did that for you. You just need to modify it to meet your needs. Let’s look at the script first:

<script>

const theElement = document.getElementById("theElement");

theElement.addEventListener("click", function () {

emer("async-param", "Clicked Event Name", true);

})

</script>

If you're not a developer it might look weird scary, but do not worry. You don’t have to understand how it works, and I will break down how you can capture and send any click on any element on your website. Let’s take it step by step

A) Define a friendly name for the element you want to track clicks on, and change “theElement” in the script to this new name

For example, let’s say I want to track clicks on the “show info” button that I have on some page. I can go into the pre-made script and just change “theElement” to “moreInfoButton”, or any name* you desire.

* The name can't have any spaces in it.
​** It can be named anything and it will still work. Could be named blabla123 and it will still work all the same. The reason you want to give it a friendly name is for your own convenience when you look back at it later on.

B) So if we modify the script with this in mind, it will look like this:

<script>

const moreInfoButton = document.getElementById("moreInfoButton");

moreInfoButton.addEventListener("click", function () {

emer("async-param", "Clicked More Info Button", true);

})

</script>

I bolded the parts that I changed. You will see that wherever in the original script it used to say “theElement” I changed it to “moreInfoButton”.

I also changed that “event name” example and changed it to “Clicked more info button”. This is just the friendly name you want this event to be called inside of Emercury, this will make sense later on when we finish and test things.

If you use the free “Header Footer Code Manager” plugin to add your code, I suggest that you set the location to "in footer", and then just place the script you came up with in the code area like so.

It is in fact quite easy. And we designed it in such a way that you can do it even if you’re not a developer.

But there is one step left. You see, this script that we created above will capture any click on a website element that has an id of “moreInfoButton” and send it to your Emercury account.

But you actually need to have an element with that ID in the first place. And assigning that ID to an element on your website is the second and last step.

What you need to do is go ahead and choose an element on your website and give it the same ID as in the script above. Remember, in our example we used the id “moreInfoButton”, so I will go with that.

In your case the name can be anything, as long as it has no spaces and you use the same name in both the script, and when you assign it to an element on your website.

How you assign an ID to an element will depend on the builder that you use to design your page in WordPress. We will give you two examples depending on whether you use Gutenberg or Elementor as that will cover most WordPress users.

If you use a different platform, ask us and we will try to add an example for it. Or you can look at the Elementor and Gutenberg examples to get an idea, and then search how to add an ID to an element in the page builder that you use (if it's different from these two).

Option A) Elementor
​

All you have to do is select the element that you want to assign this ID to. In my case for this tutorial I went ahead and just placed a regular button on the Elementor page like so:

Since I have it selected, if I go to the advanced tab, I will see a category of options also called "advanced"

Notice there’s an option called “CSS ID”. This is where I put in the ID for the element. And that’s it. It really is that easy.

From this moment on, anytime someone clicks on this button, it will send the event we defined in the script earlier. It will appear as an event in your Emercury account.

* The title says “Elementor test” because that is what I named the page where I placed the button.
​
** The name of the event (Clicked More Info Button) was defined inside the script itself. Emercury is going to use any name you give to the event from the script itself.

Option B) Gutenberg

All you have to do is select the element that you want to assign this ID to. In my case for this tutorial I went ahead and just placed a regular button on the Gutenberg page like so:

If I click on the button, this will select it. I can then go to advanced under the sidebar on the right like so:

Notice there’s a field called “HTML Anchor”. This is where I put in the ID for the element. And that’s it :) It really is that easy. From this moment on, anytime someone clicks on this button, it will send the event we defined in the script earlier. It will appear as an event in your Emercury account.

* The title says “Gutenberg test” because that is what I named the page where I placed the button.
​
** The name of the event (Clicked More Info Button) was defined inside the script itself. Emercury is going to use any name you give to the event from the script itself.