Home How do i track view count of different div blocks on single page while scrolling without clicking them
Reply: 1

How do i track view count of different div blocks on single page while scrolling without clicking them

malav
1#
malav Published in 2018-01-03 09:21:43Z

I have many cards (div blocks) in my single page application. I want to track view counts when the user scrolls through this page. Means whenever one card visible on screen or in screen viewport area while scrolling just increments view count for that particular card (div blocks).

<div flex-xs flex-gt-xs="50" layout="column" ng-repeat="card in cards">
  <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">Card with image</span>
        <span class="md-subhead">Large</span>
      </md-card-title-text>
      <md-card-title-media>
        <div class="md-media-lg card-media"></div>
      </md-card-title-media>
    </md-card-title>
    <md-card-actions layout="row" layout-align="end center">
      <md-button>Action 1</md-button>
      <md-button>Action 2</md-button>
    </md-card-actions>
  </md-card></div>

Now this card is in ng-repeat loop. Whenever user scroll down or up and particualr one card will be visible at that time I want to add Below mentioned html code to card to track view count.

<img ng-src="{{root_url}}/get_image_url?user_id=1&card_id=1" height=1 width=1 style="height: 1px !important; width: 1px !important; display: hide">

It's like Facebook tracking pixel thing but I want to create custom and different tracking pixel for my cards which track view counts when div is visible.

I am using Ruby on Rails and Angularjs.

Tamer Durgun
2#
Tamer Durgun Reply to 2018-01-03 10:55:48Z

1.) You need window scroll function here, so create card directive to use jquery like exampled in here except anchor use (you need to figure out the way of selection),

2.) Bind directive to it's controller and retrieve viewcount data from where you pull them, and pass that data to directive link function where you call scroll function

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.265981 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO