Enhancing website performance with a combination of Google Analytics outbound click tracking and a JavaScript speed bump

I have successfully integrated the universal GA for tracking outbound clicks, however I have also added a "speed bump" pop-up message that appears when a user clicks on an offsite link. The JavaScript code for this is as follows: (specific to bank client - speed bump required)

My question is, will this affect the GA outbound click tracking in any way? When a user clicks on an external link, they will see a modal box with a disclaimer and options to "Continue" or "Decline."

$(document).ready(function() {
$('.external').click(function() {
var link = $(this).attr('href');

$('<div>By accessing this link you will be leaving the site...</div>').dialog({
  title: "Third-Party Site Disclaimer",
  modal : true,
  overlay: {
    backgroundColor: '#fff',
    opacity: 1
  },
  buttons: {
    'Continue': function() {
      $(this).dialog('close').remove();
      window.open(link);
    },
    'Decline': function() {
      $(this).dialog('close').remove();
      return false;
    }
  }
});

return false;
});
});

The Google outbound click tracking code included in my setup:

<script>
    /**
    * Function that tracks a click on an outbound link in Analytics.
    * This function takes a valid URL string as an argument, and uses that URL string
    * as the event label. Setting the transport method to 'beacon' lets the hit be sent
    * using 'navigator.sendBeacon' in browser that support it.
    */
    var trackOutboundLink = function(url) {
       ga('send', 'event', 'outbound', 'click', url, {
         'transport': 'beacon',
         'hitCallback': function(){document.location = url;}
       });
    }
    </script>

Answer №1

If you're unsure about how the outbound link tracking is set up, I can suggest where to place the GA events in the code snippet provided, as well as propose names for the category, action, and label.

$(document).ready(function() {
    $('.external').click(function() {
    var link = $(this).attr('href');
    ga('send', 'event', 'Outbound Link', 'Intent', link);

    $('<div>By clicking this link, you are exiting the site...</div>').dialog({
      title: "Third-Party Site Disclaimer",
      modal : true,
      overlay: {
        backgroundColor: '#fff',
        opacity: 1
      },
      buttons: {
        'Continue': function() {
          ga('send', 'event', 'Outbound Link', 'Disclaimer Continue', link);
          $(this).dialog('close').remove();
          window.open(link);
        },
        'Decline': function() {
          ga('send', 'event', 'Outbound Link', 'Disclaimer Decline', link);
          $(this).dialog('close').remove();
          return false;
        }
      }
    });

    return false;
    });
});

This setup allows for tracking of outbound link intent and further tracking of continue/decline actions separately.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Highchart formatter function is being called twice on each occasion

My high chart has a formatter function that seems to be running twice. formatter: function() { console.log("starting formatter execution"); return this.value; } Check out the Fiddle for more details! ...

AngularJS views malfunctioning following oauth redirect

I am in the process of creating a web application using AngularJS and Firebase. Recently, I added a second page along with an ng-view to my index file. In order to facilitate login via Facebook or Google, I am utilizing the $firebaseAuth service. However, ...

The functionality of the calculator, created using HTML and JavaScript, is impeded on certain devices

I developed a web-based app that functions as a simple calculator for calculating freight/shipping prices to Venezuela. The app allows users to select between 1 to 4 packages, and choose different types of freight including air (normal, express) and mariti ...

Issue: The variable THREE has not been defined within the FBXLoader code

Currently, I am utilizing the module version of three.js in order to execute imports from a client-side JavaScript file structure. The core functionality of THREE is working correctly. However, I am encountering an issue when attempting to use it with FBX ...

The input field automatically populates with the username that has been stored in the browser's form

Issue: I have created an input field with the type text, but upon page load, it gets automatically filled with a username saved in the browser's form data for this website's login page. I want it to show up clean when the page loads. <input t ...

What sets apart window.app=new Vue({}) versus const app = new Vue({}) when included in app.js within a Vue.js environment?

What exactly is the difference between using window.app and const app in main.js within Vue? import question from './components/Questions.vue'; Vue.http.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken; window.App = new Vue({ ...

Load CSS stylesheet depending on Internet Explorer document mode

As I work on my website, I am facing the challenge of incorporating different versions of my style sheet based on the browser's document mode, not the browser mode. For instance, if the documentmode = ie8, I may need to load main_ie8.css, whereas for ...

Master the Art of Animating Letters in the DOM by Navigating Through Any Array of Characters

I am attempting to implement a typewriter effect animation where a new message is displayed and animated as I type into an input box. Initially, I tried using a global char variable to iterate through each element of the array. However, whenever I passed ...

Trouble with closing Bootstrap 4 modal

My Bootstrap 4 modal is causing issues as it pops up on button click but won't close unless I refresh the page. I've been attempting to get it to close by clicking the 'close' button or simply by clicking anywhere on the main page body. ...

Engaging with the crossrider sidepanel extension

When it comes to the crossrider sidepanel, I prefer using an iframe over js-injected html to avoid interference with the rest of the page. However, I am struggling to establish any interaction between my browser extension and the iframe. I believe adding ...

Unable to dispatch actions within the mounted lifecycle hook in Vuex?

Can anyone explain why the json data I fetch with axios is not populating my state.pages as expected? Interestingly, when I make a change to the file and vite reloads, the data appears on the page. However, it disappears again upon refreshing the browser. ...

What is the process by which node.js synchronously delivers a response to a REST web service?

Sorry if this question seems obvious! I'm struggling to grasp how node.js handles requests from the browser. I've looked at tutorials online where express.js was used to create the server-side code with node.js. Routes were then set up using prom ...

The 'palette' property is not found on the Type 'Theme' within the MUI Property

Having some trouble with MUI and TypeScript. I keep encountering this error message: Property 'palette' does not exist on type 'Theme'.ts(2339) Check out the code snippet below: const StyledTextField = styled(TextField)(({ theme }) = ...

Navigating to a different intent within the DialogFlow Messenger fulfillment can be done by utilizing the 'agent.setFollowupEvent(targetIntentEventName)' method

I am currently exploring ways to initiate another DialogFlow Intent (using its event) from a webhook server built with node.js. This will occur after gathering the user's email address, verifying their registration status by sending a POST API request ...

Obtaining serverTime from a webpageWould you like to learn

Is it possible to retrieve the serverTime using jquery ajax functions like $.get() or $.post()? I am looking to store this serverTime in a variable that can be utilized later on in javascript. You can access the webpage at: To use the get and post functi ...

What is causing the digest loop from this angular filter grouping?

My goal is to showcase a variety of items in batches of N at a time. The reason for chunking the items is because I need them to be laid out in a tabular or gridded format (each group of N items forms a row, with each item being a column). Below is my atte ...

Using SetTimeout with the TextInput component in a React-Native application

Currently, I am working on creating a SearchBar component for my new Android application using React-Native. As a newcomer to React-Native, I created a function called _changeInput() to handle passing text to a local function. Initially, the text pass wor ...

The functionality of a basic each/while loop in jQuery using CoffeeScript is not producing the desired results

I've been experimenting with different methods to tackle this issue. Essentially, I need to update the content of multiple dropdowns in the same way. I wanted to use an each or a while loop to keep the code DRY, but my experience in coffeeScript is li ...

Redirecting after executing JavaScript code

Is it possible to implement a redirect after the subscription script for push notifications has been executed successfully? <script> var OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ ...

Assign the filename to the corresponding label upon file upload

I've customized my file uploader input field by hiding it and using a styled label as the clickable element for uploading files. You can check out the implementation on this jsFiddle. To update the label text with the actual filename once a file is s ...