Using Piwik PRO Tag Manager to Trigger Pop Ups and Push Notifications

Published: June 20, 2016 Updated: August 24, 2018 Author Category Tag Manager, Use cases

On our blog we have already shown you how Piwik PRO Tag Manager can improve your work with web analytics tools and tag management. Now we would like to guide you through the process of using Piwik PRO Tag Manager to implement and trigger Pop Ups and Push Notifications on your website.

Piwik PRO Tag Manager is a very flexible platform, so you can use it for the implementation of existing marketing tools or you can implement your own, custom Pop Ups and notifications. Let’s discuss a few of the most popular use cases.

Using Piwik PRO Tag Manager to implement and launch an existing Pop Up solution

In most cases you won’t be developing Pop Ups on your own. Instead you will be using a dedicated solution that will generate the Pop Up for you like HubSpot, Marketo, PopUp Domination, Marketizator, just to mention a few.

All of those tools will allow you to build your own Pop Ups and Notifications using some simple graphic editors and at the end will provide you with a javascript snippet that needs to be implemented into the website source code. Usually you would end up receiving a single line of code that would look like this:

<script src="https://app3.yuourpopuptool.com.pl/dynamic/tnn5iu9r6k5n0qn4/popups.js"></script>

Free Comparison of 6 Enterprise-Ready Tag Management Systems

Get to know the 40 key differences between Google Tag Manager, Tealium, Segment, Adobe Marketing Cloud, Ensighten & Piwik PRO:

Download FREE Ebook

So how to get your Pop Up tool up and running using Piwik PRO Tag Manager?

First of all, you will have to create an Asynchronous custom HTML tag that we will use to embed your Pop Up tool into the website of your choice.

Click on the + Add a tag

Piwik PRO Tag Manager - adding a tag
Piwik PRO Tag Manager - adding a tag

And later start the configuration by setting up the Tag name and choosing Asynchronous custom HTML tag:

Choosing Asynchronous custom HTML tag
Choosing Asynchronous custom HTML tag

Inside the tag editor you will simply get the blank window where you can copy and paste previously mentioned javascript snippet. Before jumping to the next step, there is one important action that needs to be performed. Every time you want to implementa tag that will be changing content on your website or have some visual impact on your website (except A/B testing tools tags) you have to mark the checkbox Enable document.write below the editor window.

Adding popup code
Adding popup code

Once we have the javascript snippet in place, we can move to the next step where the real fun begins.

Most Pop Ups and Notification tools will allow you to create conditions to determine when the Pop Up should be triggered or on which pages it should be launched. If so, you won’t to have to worry about showing your Pop Ups and Notifications at the right time and to the right users.

But if you feel that you want to have more control over where your Pop Ups fire or if your tool simply does not provide enough targeting options, you can make use of the built-in Piwik PRO Tag Manager triggers and conditions.

Trigger configuration in Piwik PRO Tag Manager
Trigger configuration in Piwik PRO Tag Manager

You can use Piwik PRO Tag Manager triggers and conditions to:

  • Fire your Pop Ups only on specific pages and URLs within your website.
  • Fire Pop Ups when users perform a specific action like link click, button click or form submission.
  • Fire Pop Ups using custom events, defined by you, like time on site or the number of pageviews.

When you are done with the setup described above, do not forget to save and publish your tag.

Using Piwik PRO Tag Manager to implement and launch custom Pop Up HTML or javascript

If you are a tech savvy marketer or you have smart developers on hand that are willing to help you, you can create your own custom Pop Up solutions. Just as in the previous example, you will have to use Asynchronous custom HTML tag to implement such Pop Ups.

Of course, this time instead of pasting a simple javascript code that will fetch the Pop Up for us from an outside server, we paste the whole HTML code responsible for the Pop Up layout. It is also possible to include additional javascript conditions and triggers in the Pop Up HTML code. Here is how a sample implementation may look like in Piwik PRO Tag Manager custom HTML tag editor:

Popup configuration in Piwik PRO Tag Manager
Popup configuration in Piwik PRO Tag Manager

Once again we can include our own conditions and triggers in Pop Up HTML code or we can use built-in Piwik PRO Tag Manager triggers and conditions to fire the Pop Up. As we have already mentioned, by using Piwik PRO Tag Manager triggers we have the ability to:

  • Fire Pop Ups only on specific pages and URLs within your website.
  • Fire Pop Ups when users perform a specific action like link click, button click or form submission.
  • Fire Pop Ups using custom events defined by you, like time on site or the number of pageviews.

After we save and publish our own custom Pop Up we will be able to see results similar to what we achieved earlier.

Clearcode popup example
Clearcode popup example

But that’s not all! There are also some other fancy examples of using Piwik PRO Tag Manager to display personalized content.

Using Piwik PRO Tag Manager to implement widget surveys (ie. Qualroo)

Another of our favourite use cases for Piwik PRO Tag Manager is launching, editing and modifying widget servers ie. the ones provided by Qualroo, which is one of the most effective ways of collecting feedback from your website.

Most of the set up occurs within the Qualroo panel, where you can set up all the triggers and URls on which you want to display your widget.

Qualaroo settings
Qualaroo settings

With regards to the options provided by the Qualroo for setting up a code responsible for the widget to appear on your website – that is up to you.

Qualaroo code
Qualaroo code

Of course you can do this quite easily using Piwik PRO Tag Manager’s predefined template for Qualroo or a custom HTML tag as shown on the screenshots below:

Qualaroo template configuration in Piwik PRO Tag Manager
Qualaroo template configuration in Piwik PRO Tag Manager

For the Qualroo template you simply need to provide a Ccustomer ID and Site token. As was previously mentioned, you can set specific targeting for where to display your Qualroo widget using Qualroo’s panel. But you can also do that using Piwik PRO Tag Manager’s triggers and conditions.

Trigger configuration in Piwik PRO Tag Manager
Trigger configuration in Piwik PRO Tag Manager

Using Piwik PRO Tag Manager you can set your Qualroo survey to be triggered:

  • On specific URLs and subpages of your website.
  • After a user has clicked a link or button.
  • After a custom event was performed – for instance when the user spent a specific period of time on your website or generated a specific number of pageviews.
  • After user submits a form.

Clearly Piwik PRO Tag Manager offers a vast set of possibilities, especially if you feel limited by the targeting methods provided by the Qualroo. When you finally set up where and how your survey widget should be fired, you can go ahead and Publish it via Piwik PRO Tag Manager. The final result should be visible soon on your website.

Qualaroo survey visible on cloud.piwik.pro
Qualaroo survey visible on cloud.piwik.pro

Free Comparison of 6 Enterprise-Ready Tag Management Systems

Get to know the 40 key differences between Google Tag Manager, Tealium, Segment, Adobe Marketing Cloud, Ensighten & Piwik PRO:

Download FREE Ebook

Tagged under

Author:

Szymon Grzesiak, Marketing Tech Lead

Tech savvy Performance Marketing Specialist. LinkedIn Profile

See more posts of this author
Free Comparison of 5 Enterprise-Ready Tag Management Systems

Share