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:

1 2 3 4 5 6 7 8

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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:

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

to:

1	<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.