Campaign Specific Popup

To implement the custom popup for specific campaign triggers using Google Tag Manager (GTM), follow these steps:

Step 1: Set Up the Trigger in GTM

  1. Login to Google Tag Manager:
    • Go to your GTM account and select the container for your Shopify store.
  2. Create a New Trigger:
    • Navigate to the “Triggers” section.
    • Click “New” and name your trigger (e.g., “Campaign Popup Trigger”).
    • Click “Trigger Configuration” and select “Page View”.
    • Choose “Some Page Views”.
    • Set the condition to target URLs containing your campaign parameters (e.g., utm_source, utm_medium, utm_campaign).
      javascript
      PageURL contains utm_source=your_campaign_source

Step 2: Create the Popup HTML/CSS/JavaScript in GTM

  1. Create a New Tag:
    • Navigate to the “Tags” section.
    • Click “New” and name your tag (e.g., “Campaign Popup Tag”).
    • Click “Tag Configuration” and select “Custom HTML”.
  2. Insert the HTML and JavaScript:
    • Paste the following code into the Custom HTML field:
      html required
      <divid="campaign-popup"style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; z-index:1000;">
      <divstyle="background:#fff; padding:20px; border-radius:10px; text-align:center; max-width:300px; margin:auto;">
      <h2>Free Shipping!</h2>
      <p>Use code <strong>ILOVESHIPPING</strong> at checkout to get free shipping on your order.</p>
      <buttonid="close-popup"style="margin-top:10px; padding:10px 20px; background:#000000; color:#fff; border:none; border-radius:5px; cursor:pointer;">Close</button>
      </div>
      </div>
      <script>
      document.addEventListener('DOMContentLoaded', function() {
      var popup = document.getElementById('campaign-popup');
      var closeButton = document.getElementById('close-popup');
      popup.style.display = 'flex';
      closeButton.addEventListener('click', function() {
      popup.style.display = 'none';
      });
      });
      </script>
  3. Set the Trigger for the Tag:
    • Click on “Triggering” and select the trigger you created in Step 1 (e.g., “Campaign Popup Trigger”).
  4. Save and Publish:
    • Save your tag.
    • Click “Submit” in GTM to publish your changes.

By following these steps, you will have a popup that displays for visitors arriving from a specific campaign, offering them free shipping with the code “ILOVESHIPPING”. The popup will be styled according to your specifications and will be closable by the user.

Scroll to top