making a popup using SweetAlert library without WordPress plugin or Drupal module

What you need:

• image as header for you popup
• marketing text with clear CTA (for in your button)
• Google Tag Manager to display it on the pages you want.

We will using the javascript library SweetAlert2.

Go to your Google Tag Manager

• Define a new tag
• Use ‘Custom HTML’ as “Tag Configuration”
• Use ‘Page View’ as “Tag Trigger”.
  Define which pages you want to have the popup shown.

Here is the final code

<script src="//cdn.jsdelivr.net/npm/[email protected]"></script>
<script>  
var cookie_check = document.cookie.match(/^(.*;)?\s*popup_sweetalert\s*=\s*[^;]+(.*)?$/);
if (!cookie_check) {
setTimeout(function() {        
        var delay_in_hours=1;
        var now = new Date();
        now.setTime(now.getTime() + delay_in_hours * 3600 * 1000);
        document.cookie = "popup_sweetalert=yes; expires=" + now.toUTCString() + "; path=/";        
        Swal.fire({
            position: 'bottom-end',
            showCloseButton: true,
            confirmButtonText: 'Click >> <u>HERE</u> << to discover more.',
            confirmButtonColor: '#0000ff',
            title: 'Maecenas nec fringilla tellus',
            text: 'Donec augue urna, sagittis eget interdum in, vulputate eu felis. Nullam neque arcu, egestas ac tincidunt id, auctor quis quam. Suspendisse potenti. Cras pretium ligula posuere, ullamcorper nisl ut, semper velit. Cras interdum, mi eu tempus dictum, risus tellus vehicula odio, eu interdum leo sem in libero.',
            imageUrl: 'https://placeholder.pics/svg/300×1500',
            imageAlt: 'Placeholder alt',
        }).then(function(result){                  
				  if (result.isConfirmed) {
						window.location.href = "https://stijnbernaer.com";
				  }				  
				})
    },
    1500);
}
</script>

Advanatges of using this approach:

• independent of CMS (Drupal, WordPress). So easy portable
• if you give someone access to your Google Tag Manager, they don’t need access to the backend of your CMS

Disadvantage (compared to CMS) you habe to kinda keep an eye on the development of the library (in this case SweetAlert2) … security alerts

Troubleshooting.

Encountered the error message (ECMASCRIPT_2015 related) below?

	Error at line 20, character 17: This language feature is only supported for ECMASCRIPT_2015 mode or better: arrow function.

Well the SweetAlert2 examples ofen use construction like this

then((result) => {
	  if (result.isConfirmed) {
	
	  }
...

You should replace this with

then(function(result){
	  if (result.isConfirmed) {
	
	  }
...

So replace in this case:
(result) =>
with
function(result)