Counting Clicks via Dynamic Actions

The ink was barely dry on my recent post Counting Clicks when Dimitri Gielis suggested a much simpler way to achieve this in Oracle Application Express 4.0. And even though the suggested implementation is buried in the comments of that post, I wanted to explicitly offer it here.

This second solution is even more straightforward. It involves:

1. A dynamic action
2. An anchor with a specific class or ID

That's it! A demonstration of this logic is on pages 4 and 5 of this application here.

I created a simple table to store some of my most commonly used URLs. I built an application containing a report and form on top of this table, and then removed a lot of the functionality of the form to make it read-only.

Then, I created a simple log table with columns for some of the information I'd like to capture:

create table click_log(
    user_name        varchar2(1000),
    click_ts         timestamp,
    ip_address       varchar2(100),
    user_agent       varchar2(1000),
    apex_session_id  number,
    rownum_clicked   number,
    info             varchar2(4000) )

With this basic infrastructure in place, I now want to implement the two constructs to easily enable click logging of these URLs.

On page 5 of my application (the "form" page), I created a dynamic action named "Log Click" and with the following attributes:

• Event: Click
• Selection Type: jQuery Selector
• jQuery Selector: #link
• Condition: No Condition

The True Action was of Action Type "Execute PL/SQL Code" and the actual code itself was:

insert into click_log(
    user_name,
    click_ts,
    ip_address,
    user_agent,
    apex_session_id,
    rownum_clicked,
    info )
values
    ( v('APP_USER'),
      systimestamp,
      owa_util.get_cgi_env('REMOTE_ADDR'), 
      owa_util.get_cgi_env('HTTP_USER_AGENT'), 
      v('APP_SESSION'),
      v('P5_ID'),
      'Clicked: ' || v('P5_NAME') );
commit;

So with my Dynamic Action, all I needed to do is modify the anchor on my page to include the id "link". I did this by augmenting the URLs on my form page, changing them from:

<a href="http://www.amazon.com/" target="_new">http://www.amazon.com</a>

to:

<a href="http://www.amazon.com/" target="_new" id="link">http://www.amazon.com</a>

Because my jQuery Selector was for any element with an ID of "link", and I wanted the event to operate on my link, I needed to add this "id" attribute to my anchor.

You can see a demonstration of this logic in pages 4 and 5 here in My Favorite URLs application.