Popup tag

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.

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.
   

   

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

    

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.
    

    

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.
    

    

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.
    

    

    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.
    

    

    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.