0

I have built my CMS around modules (ex: slideshow, footer, navigation,...) and I would like to track usage of those modules by using Google Analytics events.

What I have done is the following: In each PHP module, I have added a JS function that tracks the position of a given module and when the module becomes visible in the viewport, the Google Analytics part is triggered.

Here is the code:

init = 0;
$(window).scroll(function() 
{ 
    screenheight = $(window).height();
    scrollposition = $(window).scrollTop()+screenheight;
    divheight = $("[containername]").height();
    divposition = $("[containername]").position().top;
    if ((scrollposition>divposition) && (init==0))
        {
            ga('send', { 'hitType': 'pageview', 'page': 'blablabla', 'title': 'more blablabla' });
            init = 1;
        }

});

It's all working fine but... I have many modules and putting this in every module is probably not the most intelligent thing to do. So now I'm looking for a more generic solution.

Every module is encapsulated in a div with a unique ID. Each unique ID ends with -container, ex:navigation-container, slideshow-container,...

What I'd like to do is to detect if one of those -container div appears in the viewport (any of them) and if it is the case, fire the same JS. I have tried with .match and a regular expression but it doesn't look like it is able to detect individual divs.

I would also like to track clicks inside those divs in the same way. Today I have written individual JS for each module.

Any suggestions?

****** UPDATE ********** I have solved the click tracking part by using a filter + regexp:

$('div').filter(function() {  return this.id.match(/container/);     }).click(function()
{
   // do something
});

This allows me to have one generic click tracking for all clicks in the divs I want to track.

Now I'm still looking for a solution for the other issue (detecting in viewport)

Thanks Laurent

Laurent
  • 1,465
  • 2
  • 18
  • 41
  • 1
    Check my answer here: http://stackoverflow.com/questions/38441231/auto-play-flowplayer-video-when-video-in-viewport/38768791#38768791 It's not an exact duplicate, but the code is the same. – Dekel Oct 26 '16 at 19:26
  • Hello Dekel, thanks. My problem is of a slightly different nature. In your example you have one specific DIV that needs to be detected. In my case I have many DIVs that need to be detected and I'd like to avoid writing a function to detect each DIV individually like in my example. – Laurent Oct 26 '16 at 19:31
  • 1
    You can use the logic from my answer and run it over multiple elements (the code should be the same). Another option is to develop a plugin for jquery that will do that for you... – Dekel Oct 26 '16 at 19:43
  • btw, @user3638239, if the other answer helps you are welcome to vote it up :) – Dekel Oct 26 '16 at 19:56
  • Hi Dekel, I could indeed loop the solution for each div but looping each time the screen is scrolling is likely to affect performance, no? – Laurent Oct 26 '16 at 20:03
  • No matter what you do - you need to loop over the elements to see if they are in the view or not :) There is not "event" that fires when the element is "in the viewport" or "out of viewport" – Dekel Oct 26 '16 at 20:04
  • I may have found a way around, check my update in the initial question :) – Laurent Oct 26 '16 at 20:23
  • 1
    Well, for that you can use `$('div[id*=container]')` – Dekel Oct 26 '16 at 20:26
  • shorter and better, thanks :) – Laurent Oct 26 '16 at 20:48

0 Answers0