Button Counter

Ask the community
,
1

Hello,

I have buttons on 2 different pages on my website that I’ve like to capture the number of clicks on. One set of buttons is on this page which anyone can see and the other is on another page that people need to have a site account to see.

My question is how can I input code that will allow me to track the number of times these buttons have been clicked (or even just hovered over)?

2

Hello kcyour,

it should be very simple to realize your wihes.

You take a button and place it on your page.
Then you active an “onClickEvent” for this button.

Now you should see some litte pice of code in the code-section of this page.

Should look like this …

export function button1_click(event) {
 //Add your code for this event here: 
}

Now you want to generate a COUNTER which will count every click the button was clicked by a user…

var myCounter  

exportfunction button1_click(event) {
    myCounter = myCounter+1
}

Now you have a button which should count every click.

To display the results and to see if it works, you can use the CONSOLE.LOG-command…

var myCounter  

exportfunction button1_click(event) {
    myCounter = myCounter+1
    console.log(myCounter)
}

Press F-12 in your google-chrome Webbrowser and go to CONSOLE.
Click several times on the button and see what happens.

Good luck.

3

Thank you for the response.

That seems to work but now the issue is the button is supposed to initiate a download and when I enable the click event the download no longer works. Any idea why this is?

4

I think this is a new problem. You did not mentioned this at your first post.

Hello,

I have buttons on 2 different pages on my website that I’ve like to capture the number of clicks on. One set of buttons is on this page which anyone can see and the other is on another page that people need to have a site account to see.

My question is how can I input code that will allow me to track the number of times these buttons have been clicked (or even just hovered over)?
Please always describe your issue as whole and not in parts.

And i do not see your actual code i am not a …

900×660 85.6 KB

You have to give more INPUT !

5

I am trying to track how many times a button gets clicked. This button leads the customer to another site. I have the code above in and I can see in Console that when I click it, I get an error message (see below). It is asking me to define myCounter. What am I doing wrong?

1152×214 54 KB

Here is my code I currently have:

export function CurrentGuests_click(event) {
    // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
    // Add your code for this event here: 
    myCounter = myCounter+1
    console.log(myCounter);

Thank you!

6

The myCounter variable is not declared yet in the code that’s why you get the Reference Error.
On top of the Code Page just add

let myCounter = 0;

to actually get a variable to count to.

The value will only be saved per session and not count other peoples clicks, reason is that you don’t store the value yet somewhere where you can use it again and the = 0 will reset it on new sessions.

To fix that you could just make a database where you write the incremented value to when the button is clicked and you retrieve that value on page load and set it to the myCounter variable.

Concerning the problem with the download no longer working, it might be that there is the problem that wix is assigning 2 on click events, but only 1 can run. To fix the not working download you would need to code the download to the on click event of the button as well.

7

Hey Velo-Ninja,

I am trying to display the click counter on my website. So far I copied your code but I don’t know how to display the counter. Could you help me?

Thank you so much in advance!

8

1) Create a button on your page → “button1”.
2) Paste this code into your current page… (to be able to paste the code, you will need first to activate the “DEV-MODE” (developement-mode).
3) Publish your website and test it on your LIVE-SITE, or in the Wix-Editor in the PREVIEW-MODE.

Take a look onto the CONSOLE for results.
CLICK CLICK CLICK !!!

$w.onReady(async() => {console.log("Page is ready...");  
    let myCounter = 0;

    $w('#button1').onClick(()=>{console.log("clicked");
        myCounter = myCounter+1;
        console.log("My Counter-Number: ", myCounter);
    });
});