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 () {
    GTMViewport.init([
      {
        selector: '#some_element_id_1',
        eventName: 'some_element_id_1_was_viewed_event',
        callback: function(eventName) {
          console.log(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'
      }
    ]);
  });
</script>

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