Counting impressions/views of an icon in a repeating group [SOLVED]

Just wondering if it’s possible to create a counter next to an icon that will measure how many times that particular icon has been viewed (not clicked).

I want to track how many impressions each individual post gets in a repeating grid - similar to how a platform like Dribbble functions.

I’ve attached an image below of my current design.

I’m hoping to record an impression each time the eye icon has been viewed on an individual post.

Would appreciate any help :+1:

Hey there,

Yeah this is possible - but a question into the logic:

Do you want the impressions to be unique e.g. only 1 per user, even after page reload?

If I’m understanding you correctly, you either want:

  1. The views to be counted from the page with the repeating group on it
  2. The views to be counted from a different page, unique to the post itself (like a new page opened when it’s clicked in the RG)?

If it’s 1, I believe you’ll wanna trigger the make a change to a list action when the page is loaded, on page load, that list being the RG in question, but with a filter that excludes any post associated/created by the current user (unless you want someone to be able to boost views for their own post).

The field you’ll wanna change on that list is of type number, called Impressions and you’ll want to set it to this posts impressions +1. Just make sure in the database you first set the default value for the impressions field to 1.

If it’s 2, you’ll do the same, only you’ll make changes to a single post, that being the current page’s post.

And of course in the RG you’ll display the current cell’s posts impressions out through a text element.

Here is one concept that will work so that the impression is legit e.g. actually visible on the users viewport (display) and there are no duplicates e.g. page refresh keeps +1 value to the impressions count (without the use of tracking the users IP address, though that would be more accurate).

Anyhow, here is a simple principle, it can be improved and I’m not sure of the performance indication, depends on your user basis and other page workflows to take into account:

Go to your plugins and install ‘On Screen Detector’

In my example, I’ve used a data type called ‘Photos’, but within your data type, created a new field as a type ‘User’ and set to a List.
image

Now on the repeating group, add the new element ‘On Screen Detector’, you can add it into the actual cell group so its nested, as long as it can refer to the ‘Parents group…’.

I’ve left the element properties to their defaults, should be fine, but you may want to tinker with these to find the best trigger (depends on screen sizes and repeating group style):
image

Next create a new workflow event ‘A On Screen Detector Enters Screen’
image

Then add a condition, something like the below onto the main workflow event just created:
image
It just stops impressions for the actual creator of the data type entry from being logged.

Now on the workflow action we make a change to a thing (we can work within the repeating group item, single basis):
image

Thats it. You can debug and check by adding some text into the repeating group to check that the count works for each entry:
image

So this is doing a count of the list of users logged in the field of the data type. There maybe a quicker way to get the data, but I assume you’ll be creating a dashboard or something similar for users to see the stats and what not.

You’ll notice that if a user isn’t actually logged in, it will be added, but it will appear blank as Bubble doesn’t have any data for that user since they don’t have an account, but it will still create a empty object. If a user is logged in, you’ll see the default primary field e.g. email assigned to the user who made the impression/view of the repeating group item.

So the result is that as a new user scrolls down the page, the workflow will run in the background as each repeating group cell is visible. This will track the unique (almost) impressions of the entry. You can do different tests logging in with unique users in your app or running Chrome in incognito mode and testing there.

Result test:
track-impressions-test

Quick look into the preview and editor if needed for reference:

7 Likes

Worked a treat!

I also configured the impression counter workflow to register when the counter leaves the screen (not enters). This allowed the text field to update once it was out of the users field of view.

Thanks for the detailed explanation, really appreciate it :+1:

Good stuff. Glad you’ve setup all okay. Nice, yeah the plugin does provide flexibility in the approach which is nice, number of ways to achieve the goal.

This topic was automatically closed after 70 days. New replies are no longer allowed.