Custom pop-up tag

Available from version 10.1.0.

Whenever you want to create a pop-up for online campaign on your website, you can use a ready-made tag in Tag Manager — a custom pop-up tag. We designed this tag to help you better manage and display pop-ups on your website.

A pop-up ad as an example of a custom pop-up tag in Tag Manager.

In this article, we’ll explain how to set up and publish a custom pop-up tag.

Before you start

Here are some things to know before you begin working with custom pop-up tags:

  • You need to have basic knowledge of HTML and CSS to design the pop-up, but setting it up is easy.
  • The pop-up tag is set to be displayed for visitors who consent to A/B testing and Personalization, but you can change this setting.
  • A custom pop-up tag loads simultaneously with other tags (It’s an asynchronous tag).
  • The class name for the closing button must stay as is ppms-popup-close-button, otherwise the button will not work.

Set up a custom pop-up tag

To set up a custom pop-up tag, follow these steps:

  1. Design and code your pop-up in HTML.
  2. Go to Menu > Tag Manager.
  3. Navigate to Tags.
  4. Click + Create new tag.
  5. Name the tag and select the Custom Pop-up tag type.
  6. In HTML tag code, type the code with your pop-up. Adjust the CSS, so that the pop-up fits your website’s design. The code that is already there is a basic pop-up container.
  7. Add code to a custom pop-up tag in Tag Manager.

    Note: The class name for the closing button must stay as is `ppms-popup-close-button`, otherwise the button will not work.

  8. In Advanced tag settings, set the tag type. By default, it’s set to be displayed to visitors who consent to A/B testing and Personalization, but you can change it to a different type.
  9. Advanced settings in a tag in Tag Manager.
  10. By default, the Respect visitor privacy is turned on. Leave it as is, if you want to respect visitors who set a do-not-track option in their browser.
  11. In Flight dates, set time during which you want to display the pop-up.
  12. Flight dates in tags in Tag Manager.
  13. In Tag triggers, click + New trigger or + Existing trigger to set up a trigger for your pop-up.
  14. If you’re setting up a new trigger, name the trigger.
  15. In Event type, choose the trigger type. For example, a 25% page scroll.
  16. Pick an event type for a trigger in Tag Manager.
  17. In Trigger conditions, define conditions for the trigger. For example, Page URL contains blog.
  18. Set trigger conditions in Tag Manager.
  19. In Audiences, pick an audience for which you want to display the pop-up. For example, we’ve got an audience Apple product users and we want to display the pop-up only for visitors from this audience.
  20. Add an audience in a trigger in Tag Manager.

    Tip: For more about audiences, read Create an audience.

  21. Set how often you want to fire the tag with the pop-up. For example, Fire tag once per session.
  22. Set fire tag once per session in Tag Manager.

    Tip: You wouldn’t want to overwhelm visitors with pop-ups, so pay attention to this setup. We advise you to fire the custom pop-up tag once per session.

  23. When you’re done, click Save for the trigger and click Save for the tag.
  24. Test your pop-up in debug mode.
  25. When you’re happy how the pop-up looks and works, click Publish.

Track pop-up impressions

Once the tag is set up, you can turn on the tracking of pop-up impressions.

To start tracking impressions for a pop-up tag, follow these steps:

  1. Go to Menu > Tag Manager.
  2. Navigate to Tags.
  3. From the list of tags, pick the Piwik PRO tag.
  4. In Piwik PRO Analytics setup, toggle Enable content tracking.
Enable content tracking in Piwik PRO tag.

After this option is turned on, Piwik PRO will start collecting data about pop-up impressions on your website. All stats will be available in the content performance report in Analytics (Analytics (new) > Reports > Content performance).

Content performance report in Analytics.

Note: You can also find the content report in Analytics classic (Analytics > Actions > Contents).

Was this article helpful?

of people found this helpful

Technical Support

If you have any questions, drop us a line at support_SPC@piwik_SPC.pro.

We’re happy to help!