Home   →   Blog   →   jQuery GTM In-Viewport Manager Plugin

jQuery GTM In-Viewport Manager Plugin

We’d like to share with you our new jQuery GTM In-Viewport Manager Plugin aimed to ease a way of working with Google Tag Manager (GTM). Add jQuery GTM In-Viewport Manager Plugin into your project to see for yourself how effective the interaction with GTM becomes.

Briefly about 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.

GTM has a powerful interface allowing to set up various events that should trigger in concordance with WEB/SEO masters' needs. But sometimes it is not enough and you have to spend extra time for additional configuration, for example, if the matter concerns some ’specific’ events - such as in-viewport event - which should fire when an element is shown to a website user. That's the moment when our plugin would come in handy.

Need for jQuery GTM In-Viewport Manager Plugin

jQuery GTM In-Viewport Manager Plugin simplifies the processing of elements originally located outside the viewport of the browser. Thanks to our plugin, a developer do not need to add event handlers for every element of this sort when it appears within user’s sight. Our code is quite enough.

Now, 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. The entire code example you can find below.

Thus, summing up, we can say that this jQuery plugin is meant 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.

Code example

<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'

A detailed description of this plugin can be found here. You can also see an example here in order to try it out.

comments powered by Disqus
Cf68cdaaf75f9cd1417267c6b1cafb3813c488a1 Virtual Reality Applications
Augmented reality apps are widely used – from geolocalization to using it in gaming industry. Augmented reality app is a new way to access data determined by environment conditions.
754d17aa02f8c56a0e0b671d45bf2455f6177062 Agile Methodology (Scrum)
Scrum is the very popular agile methodology for managing product development and project delivery. Scrum is the framework that could be applied for the development of product use cases, different projects or entire products.
1a1b621bfd24aba09a56bb25cf18719ad46ef190 News App Development
Smartphones are regularly used everywhere & anytime: in cars, on the way to the office, during the rest on holidays or weekends. That’s very convenient way for users to access important or just fun information with the help of news mobile app.
D63ac21dfd17c4acc93d52d9bdc72fea10e84edd Geolocation Services in Mobile Tracking Software
Geolocation services are used by many mobile apps, websites, mobile operators etc.