Opening a URL in a new tab while running additional code

Show and tell
,
1

You may want to have a button on your page that opens a URL in a new tab. At the same time you may want to run additional code as the new tab opens, for example, fire a pixel.

In this case you cannot use the $w( ‘#button’ ).link property of the button element with $w( ‘#button’ ).target = ‘_blank’ since this opens the new tab without running your additional code. You can also not use wixLocation.to( ‘{my_url}’ ) since this opens the URL in the current tab.

Here is how you can do both:

  1. Add an invisible container box to your page.
  2. Place your button inside the container box.
  3. Set the ‘.target’ and ‘.link’ properties of the button. The target property should be set to ‘_blank’ to open the URL in a new tab.
  4. Add an ‘onClick’ event handler on the container box with the logic you want to run, in our example firing the pixel.

Your code should look something like this:

$w.onReady( function () {
$w( ‘#button’ ).target = ‘_blank’ ;
$w( ‘#button’ ).link = ’ https://www.wix.com/corvid ’ ;

$w( '#box' ).onClick(() => { 
    console.log( 'firing pixel...' ); 
})

})

See how it works in the following site: https://asafr3.wixsite.com/open-in-new-tab . Open Dev Tools to see the pixel fired.

Good luck!

7 Likes