Popup tag

Tag Manager

Whenever you want to create a popup for an online campaign on your website, you can use a ready-made tag in Tag Manager, called a popup. In this article, we’ll show you how to set it up.

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

Before you start

Here are some things to know before you begin working with popup tags:

  • You need to have basic knowledge of HTML and CSS to design the popup, but setting it up is easy.
  • The popup tag is set to be displayed for visitors who consent to A/B testing and Personalization, but you can change this setting.
  • The popup tag loads simultaneously with other tags (It’s an async 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 popup tag

To set up a popup tag, follow these steps:

  1. Design and code your popup in HTML.
  2. Go to Menu > Tag Manager.
  3. Navigate to Tags.
  4. Click Add a tag.
  5. Name the tag and choose the following tag type: Popup.
  6. Click Next.
  7. In HTML tag code, type the code with your popup. Adjust the CSS, so that the popup fits your website’s design. The code that is already there is a basic popup container.
    Custom pop-up tag in Tag Manager in Piwik PRO

    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.
    Consent type in Piwik PRO
  9. Respect opt-out and DNT is turned on by default. Leave it as is, if you want to respect visitors who set Do-Not-Track in their browsers, or visitors who opt out of tracking using our opt-out form.
  10. Enable document.write is turned off by default. Toggle this option, if your tag needs document.write.
  11. In Flight dates, set the date and time when the tag is fired.
    Flight dates in Piwik PRO
  12. In Tag triggers, click Add a trigger or Choose existing trigger to set up a trigger for your popup.
  13. If you’re setting up a new trigger, name the trigger.
  14. In Trigger type, choose a type. For example, Page scroll.
    Custom pop-up tag in Tag Manager in Piwik PRO
  15. Click Next.
  16. In Amount of page scrolled, set desired percentage or pixels. For example, 25%.
  17. In Event conditions, define conditions for the trigger. For example, Page URL contains blog.
    Event conditions in Piwik PRO
  18. Avaliable below 16.0.0 In Audiences, pick an audience for which you want to run the tag. For example, we’ve got an audience Apple product users and we want to fire the tag only for visitors from this audience.
    Custom pop-up tag in Tag Manager in Piwik PRO

    Tip: For more about audiences, read this article.

  19. In Multiplicity, set how often the tag should be fired. For example, Once in a session.
    Multiplicity in Piwik PRO

    Tip: We advise you to fire the popup once per session because visitors may be overwhelmed when they see it too many times.

  20. When you’re done, click OK.
  21. Click Save for the tag.
  22. Test your tag in debug mode.
  23. When you’re happy with how the tag works, click Publish.

Track popup impressions

To start tracking popup impressions, follow these steps:

  1. Go to Menu > Tag Manager.
  2. Navigate to Tags.
  3. On the left, click Piwik PRO tag.
  4. In Piwik PRO setup, turn on Interactions with popups and content.
  5. After this option is turned on, the tracker will start counting popup impressions on your website. All stats will be available under Menu > Analytics > Reports > Content performance.
    Custom pop-up tag in Tag Manager in Piwik PRO

Was this article helpful?

Technical support

If you still have any questions, visit our community.
There’s always someone happy to help!

Related articles

Back to help center