Tracking buttons on dynamic pages

Ask the community
,
1

Hello everyone
I’ve been trying to google this, but all the information i’m seeing doesn’t factor in that the buttons are on dynamic pages, so I thought i’d reach out and see if anyone on here can help.

What I need to achieve
I need to track how many people navigate from my site to a partners website by clicking a button.
aka. How many people I refer to a partner page.
Chalets advertise on my site, I need to prove to them I am sending them hot leads.

Catch: The adverts are on dynamic pages
Each advert is a dynamic page
Dynamic page pulls data from the Property collection + Advert collection
URL is saved in the Property collection
The button is linked to their URL that’s saved in a collection - press button, get sent to the URL associated with it.

Possible solutions
Some kind of conversion tracking on Google Analytics?
Some kind of data collection on Wix? eg. How many people click the button, what advert it is associated with.

I am by no means a coder, so i was hoping Google Analytics could be used (as that would also help to tie everything together with ads too)

Would really appreciate any advice or solutions you can offer!
www.snowclans.com is my site, for reference.

2

I’ve done a similar thing before through the data collection method.

Essentially, we created another column in the database called “count”. Then on the dynamic page, we ran a backend function every time the button was clicked that would update the “count” field within the specific item with +1. Once the update was completed the code redirected them to the new site.

So, yes this can be built. Potentially, there may be methods with Google Analytics, but the Velo one is the one that came to mind first.

You can make it more or less complicated as you need

3

Thank you!
Will look into this

4

Ok I’ve found some code to copy
Right now when they press the email button it logs in a collection.

This is the code for that:
export function button4_click ( event ) {
$w ( ‘#button4’ ). disable ()
let toInsert = {
propAvailabilityDate : data . _id ,
member : wixUsers . currentUser . id ,
availabilityDate : data . weekAvailable ,
property : data . property . _id
}
wixData . insert ( “BookingemailClicks” , toInsert ). then (() => {
let date = sortDate ( data . weekAvailable )
wixLocation . to ( “mailto:” + data . property . bookingsEmail + "?subject=Booking " + data . property . title + " from " + date )
$w ( ‘#button4’ ). enable ()
})
}

I’ve tried modifying it firstly by just changing the button it references. It didn’t log the click, maybe because the website button is connected to the URL in a collection via the little connect to data thing? Does that override it?

So if I remove that, is there a way I can modify so the wixLocation.to function takes them to the associated URL in the collection?
I’m not sure what to put in the () to make it do that.

export function button41_click ( event ) {
$w ( ‘#button41’ ). disable ()
let toInsert = {
propAvailabilityDate : data . _id ,
member : wixUsers . currentUser . id ,
availabilityDate : data . weekAvailable ,
property : data . property . _id
}
wixData . insert ( “BookingemailClicks” , toInsert ). then (() => {
let date = sortDate ( data . weekAvailable )
wixLocation . to ( “mailto:” + data . property . bookingsEmail + "?subject=Booking " + data . property . title + " from " + date )
$w ( ‘#button41’ ). enable ()

})

}

If anyone can help! Much appreciated

5

You’re going to need a backend function that looks something similar to this:

import wixData from 'wix-data';

export function countClick(dynamicID){
    //import {countClick} from 'backend/countclicks';
    let options = {
        suppressAuth: true
    }

    return wixData.query('DatabaseID').eq('_id', dynamicID).limit(1).find(options)
    .then((result)=>{
        let currentClickCount = result.items[0].uniqueClick;
        let newClickCount = currentClickCount + 1;

        let items = result.items[0];
        items.uniqueClick = newClickCount;

        return wixData.save('DatabaseID', items);
    })
    .catch((err)=>{
        console.log(err.message);
        return err.message;
    })
}

And then something like this on the dynamic page code:

import {countClick} from 'backend/countclicks';
import wixLocation from 'wix-location';

$w.onReady(function () {
    let link = $w('#dynamicDataset').getCurrentItem().businessWebsite;
    let id = $w('#dynamicDataset').getCurrentItem()._id;

    console.log(id);

    $w('#btnGO').target = "_blank";

        $w('#btnGO').onClick(()=>{
            countClick(id)
            //.then(()=>{
                setTimeout(function(){
                    wixLocation.to(link);

                }, 100);
            //});
        });
});

In your current code, you’re inserting a new item within the database, rather than saving/updating a current item.

(I haven’t tested this recently, it’s old code from an old project I worked on)

If you need any help, you should find me details within my profile on this forum :facepunch: