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.