jQuery GTM In-Viewport Manager Plugin

  • in
  • gtm in-viewport javascript jquery-plugin manager coffeescript google-tag-manager events

A manager of in-viewport events for GTM (Google Tag Manager).

We are happy to share with you our new jQuery GTM In-Viewport Manager Plugin aimed to ease a way of working with Google Tag Manager (GTM).

GTM is a free tool for simple and convenient tag/events management solutions which makes it possible to add and update website tags with just a few clicks, without needing to edit the website code. It has a powerful interface allowing to set up various events that should trigger in concordance with WEB/SEO masters’ needs. But in some cases we have to spend a lot of time to add extra handlers for ’specific’ events, – such as in-viewport event – which should fire when some element is shown to a website user.

This jQuery plugin is build for making developer’s work process much easier. It’s really helpful in cases if you needs to set up GTM events for the elements initially unseen when they appears in the browser viewport.

Installation/integration and usage:

<script src="path/to/jquery.gtm-in-viewport.min.js"></script>
<script type="application/javascript">
    $(document).ready(function () {
                selector: '#some_element_id_1',
                eventName: 'some_element_id_1_was_viewed_event',
                callback: function(eventName) {
                selector: '#some_element_id_2',
                eventName: 'some_element_id_2_was_viewed_event'
                selector: '#some_element_id_3',
                eventName: 'some_element_id_4_was_viewed_event'

To start observing the element on the page, you just need to pass its CSS selector to ’selector’ key and event name (‘eventName’ key) which will be sent to GTM. Optionally, you can pass a callback function (‘callback’ key) that takes the event name as a parameter and will be called after the event has been sent..



  1. Install necessary packages.
    npm install
  2. Install Bower globally.
    npm install -g bower
  3. Install javascript libs dependencies – jQuery, isOnScreen jQuery plugin.
    bower install
  4. Build (to ‘dist’ folder).


You can also see an example here in order to try it out.


This jQuery plugin is open-sourced by Agilie Team  info@agilie.com

More info https://github.com/agilie/gtm-in-viewport-manager

Related Post


Animated Toggle Menu

Hi, guys! We’re happy to share our new free open-source Animated Toggle Menu that can be helpful for creating websites. It’s lightweight...


Rails Application Template

Base template for creating Ruby-on-Rails applications Current version: 0.1.2 How to use Download or clone the template Set your ruby version...


Web Time Tracker

Plugin named Timetracker is a time counter that works in both increase and decrease directions. It can be embedded in websites and used as a...