Okay
  Public Ticket #2278713
Redirect After Submission + Google Analytics
Closed

Comments

  •  6
    Ivan Andazola started the conversation

    This ticket is meant to be viewed by the public. 

    After some time tinkering and experimenting I have created a script that anyone can place on their WordPress site in order to automatically redirect to a thank you page after a successful booking + properly attribute bookings via Google Analytics and others. 

    Here goes. 

    /* 
    * Redirect to thank you page after 3 seconds + pass utm parameters (if any) to the thank you page 
    * Be sure to remove the comments when placing this on your website.
    * Also, if you improve upon this code, please do so.
    */
    <script>
    // this function gets and decodes the current url including utm parameters
    function getUrlParameter(name) {
        name = name.replace(/[[]/, '\[').replace(/[]]/, '\]');
        var regex = new RegExp('[\?&]' + name + '=([^]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
    };
    // these variables assign values to the keys(parameters) in the url string
    var s = getUrlParameter('utm_source'); // "source"
    var m = getUrlParameter('utm_medium'); // "medium"
    var c = getUrlParameter('utm_campaign'); // "campaign"
    var ct = getUrlParameter('utm_content'); // "content"
    var t = getUrlParameter('utm_term'); // "term"
    // This function waits until the user clicks the confirm button on the last step of booking, then waits 3 seconds before redirecting them to the thank you page
    // It also appends the current utm parameters of the page(if any) and passes them to the next page (thank you page). 
    // This allows for improved GA or other analytics tracking, and attribution for you marketers out there. 
    window.beforeConfirmedBooking = function() {
        if(s != null || m != null){
            setTimeout(function(){
                window.location.href = "https://www.example.com" + "?utm_source=" + s + "&utm_medium=" + m + "&utm_campaign=" + c + "&utm_content=" + ct + "&utm_term=" + t;
            }, 3000); //change the amount of time to wait here 
        }
        //this runs if no utm source or medium is found.
        else{
            setTimeout(function(){
                window.location.href = "https://www.example.com";
            }, 3000); //change the amount of time to wait here 
        }
    };
    </script>

    NOTE:
    Place this code in the footer of your website!!
    If you place it in the <head>, it will not work!! It will fail because Amelia will not have fully loaded before this script executes. 

    === Alternate Google Analytics Attribution Tracking ===
    You can also use the new Amelia Webhook feature to send data to Zapier. 
    The workflow goes like this: 
    Amelia -> Zapier Webhook - > Google Analytics (New Event Measurement)

    This alternate way also tracks GA events but does not pass utm parameters to the thank you page. 

    I hope this helps people. 

    Cheers!

    Ivan. 

     

  •  2,498
    Aleksandar replied

    Hello Ivan

    Thanks for sharing this with everyone.

    I'm sure it will come in handy for a lot of our users.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1
    Clem replied

    Hi Ivan 

    Thank you so much for sharing this code. 

    Just installed and it works beautifully 👍

    I don't use Url parameter in this site yet but the time delay is a great thing I was looking for (with only the redirection some notification were not sent) 

    Thanks again and I'm sure it will be helpful for many other people. 🙂

    Clem

  • Federico replied

    Hi Ivan,

    Thanks for the snippet!
    I'm trying to use it on my website, and it works like a charm, but it doesn't insert my URL parameters in the "Thank you" page URL.

    The final URL comes out like this:
    https://www.mywebsite.it/thank-you-page/?&utm_source=&utm_medium=&utm_campaign=&utm_content=&utm_term=
    All URL parameters are blank (although i inserted them on the code above).

    How can it be? It surely is an error by my side, but i can't figure out what i did wrong...

    I'm attaching an example of the code i'm using (i've just changed the name of my website). Could you please have a look?

    /* 
    * Redirect to thank you page after 3 seconds + pass utm parameters (if any) to the thank you page 
    * Be sure to remove the comments when placing this on your website.
    * Also, if you improve upon this code, please do so.
    */
    <script>
    // this function gets and decodes the current url including utm parameters
    function getUrlParameter(name) {
        name = name.replace(/[[]/, '\[').replace(/[]]/, '\]');
        var regex = new RegExp('[\?&]' + name + '=([^]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
    };

    // these variables assign values to the keys(parameters) in the url string
    var s = getUrlParameter('appuntamenti'); // "source"
    var m = getUrlParameter('sito'); // "medium"
    var c = getUrlParameter('amelia'); // "campaign"
    var ct = getUrlParameter('no'); // "content"
    var t = getUrlParameter('no'); // "term"
    // This function waits until the user clicks the confirm button on the last step of booking, then waits 3 seconds before redirecting them to the thank you page
    // It also appends the current utm parameters of the page(if any) and passes them to the next page (thank you page). 
    // This allows for improved GA or other analytics tracking, and attribution for you marketers out there. 
    window.beforeConfirmedBooking = function() {
     setTimeout(function(){
     window.location.href = "https://www.mywebsite.it/thank-you-page/"+ "?&utm_source=" + s + "&utm_medium=" + m + "&utm_campaign=" + c + "&utm_content=" + ct + "&utm_term=" + t;
     }, 3000); //change the amount of time to wait here 
    };
    </script>

    Thank you anyway!
    Bye

  •  6
    Ivan Andazola replied

    @Federico

    In your code: 

    The url variables need to match the query parameters the snippet is looking for on the thank you page. 

    ============

    *****
    var s = getUrlParameter('appuntamenti'); // "source"
    var m = getUrlParameter('sito'); // "medium"
    var c = getUrlParameter('amelia'); // "campaign"
    var ct = getUrlParameter('no'); // "content"
    var t = getUrlParameter('no'); // "term"
    ******

    window.beforeConfirmedBooking = function() {
     setTimeout(function(){
     window.location.href = "https://www.mywebsite.it/thank-you-page/"+ "?appuntamenti=" + s + "&sito=" + m + "&amelia=" + c + "&no=" + ct + "&no=" + t;
     }, 3000); //change the amount of time to wait here 


    ===========

    The variables have to match the URL query parameters at the bottom of the snippet. otherwise it will not work as intended. 

    Hope this helps. 

  •  1
    Gary Brett replied

    Hello Ivan I hope your well and safe and don't mind me reaching out, your hack is exactly what Ive been looking for but just wondered if I am doing it correctly despite your clear instructions :)

    I copied it exactly simply changing the redirecting page to mine and lowering the redirect to 2 seconds, works great but the utm doesn't pull through.


    Form URL - https://staging2.mortgageandinsuranceadvice.co.uk/adviser-callback?gclid=Cj0KCQjw59n8BRD2ARIsAAmgPmKJXSqyruJAXahKDyFvihOLAvNEoXWIIBV3U4AJkhPGin0-OyzGdf4aAiO1EALw_wcB#BOOKED

    After Submission - https://staging2.mortgageandinsuranceadvice.co.uk/thankyou/?utm_source=&utm_medium=&utm_campaign=&utm_content=&utm_term=

    We send users to the form via Google ADs so the url has the Google utm when they arrive but not when they submit the form, this is what I have in the pages where Amelia is present, anything wrong with that can you see?

    <script>
    function getUrlParameter(name) {
        name = name.replace(/[[]/, '\[').replace(/[]]/, '\]');
        var regex = new RegExp('[\?&]' + name + '=([^]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
    };
    var s = getUrlParameter('utm_source'); // "source"
    var m = getUrlParameter('utm_medium'); // "medium"
    var c = getUrlParameter('utm_campaign'); // "campaign"
    var ct = getUrlParameter('utm_content'); // "content"
    var t = getUrlParameter('utm_term'); // "term"
     
    window.beforeConfirmedBooking = function() {
     setTimeout(function(){
     window.location.href = "https://staging2.mortgageandinsuranceadvice.co.uk/thankyou"+ "?&utm_source=" + s + "&utm_medium=" + m + "&utm_campaign=" + c + "&utm_content=" + ct + "&utm_term=" + t;
     }, 2000); 
    };
    </script>


  •  6
    Ivan Andazola replied

    @GaryBrett

    The reason the script was not passing the gclid is because it's not setup to look for it. 
    I modified this script it so it looks for the gclid in the url and passes it along to the thank you page. 
    If it's not there it will just be the normal thank you page with no parameters.

    NOTE: This script is only looking for glcid. Nothing else. 

    <script>
    function getUrlParameter(name) {
        name = name.replace(/[[]/, '\[').replace(/[]]/, '\]');
        var regex = new RegExp('[\?&]' + name + '=([^]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
    };
    var gc = getUrlParameter('gclid'); // "gclid"
     
    window.beforeConfirmedBooking = function() {
        if(gc != null){
            setTimeout(function(){
                window.location.href = "https://staging2.mortgageandinsuranceadvice.co.uk/thankyou"+ "?glcid=" + gc;
            }, 2000);
        }
        else{
            setTimeout(function(){
                window.location.href = "https://staging2.mortgageandinsuranceadvice.co.uk/thankyou";
            }, 2000);
        }
    };
    </script>

  •  1
    Gary Brett replied

    Hello again @ivan I hope you are keeping well and safe.

    I still struggling with this and wondered if I am missing something here. Do I need to set up some parameters to my Google Ads final url options to make it work?

    Additionally, does the Amelia plugin admin notification email then contain these values or does it simply pass them to the thankyou page?

    Sorry to bug you again, please ignore if your busy.

  •  6
    Ivan Andazola replied

    @Gary


    1. You're correct. You need to set utm parameters in your google ads. 
    2. it only passes parameters to the thank you page. 

  •  1
    Gary Brett replied

    Thank you Ivan, much appreciated. I really hope some time in the future they included a method of tracking the user source and page submitted from to be included on admin/employee emails.

    We really cant track anything at the minute so have no idea which campaigns our users have arrived from.

    Thanks though, appreciate your answer

  •  2,498
    Aleksandar replied

    Hello guys.

    This has been forwarded to our developers, so they can work on an integrated tracking option, within the plugin. They currently have some priority tasks which need to be handled first, so I can't provide any ETA.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1
    Gary Brett replied

    Brilliant Aleksandar, that would be really useful I think .

    I'm sure many people have many requirements, for me though its just a simple admin email field showing page/post title the form was submitted from & the referral source (Google ADS, Google search, facebook etc).

    If that field could also show in the dashboard statistics would be even better :)

    Thank you and look forward to seeing this when it can be rolled out

  •  2,498
    Aleksandar replied

    You're welcome, Gary

    I just forwarded the ticket to our development team again, so they are reminded that this is a popular requests.

    I'll kindly ask you to add it as a feature suggestion on this page. Features are pushed up on our "to-do" list when there are a lot of customers requesting those features, so having your vote as a customer can be beneficial to this feature being developed sooner.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  7
    Jarno replied

    Thanks for this!

    I got it working nicely and changed the wait to 0, so it redirects immediately.

    -Jarno

  •  7
    Jarno replied

    Hi,

    I've been using this script for a year now, but suddenly it just stopped working.

    The script is still in the footer, but it does not redirect automatically.

    I deleted the long script and replaced it with the standard short one:

    window.beforeConfirmedBooking = function()
    {
    window.location.href = "https://www.roh.to/varausvahvistus/";
    };

    Then it started working.

  •  2,498
    Aleksandar replied

    Hello Jarno

    We haven't modified anything in the plugin in regards to this, but I am glad to hear that the short script currently works.

    I don't know if anyone else who used this in the past experiences the same issue as you do, but let's wait for their input as well since, as mentioned above, we haven't modified the logic in any way that would affect this.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  14
    ronnie replied

    Hi Jamo / Alexsandar,

    I'm having the same issue with the long script. I've used the short one and it's working now. So thanks for that Jarmo! 

    Unfortunately,  it means I can't track campaigns etc with the shorter code

    I do however believe, that with any ecommerce system, proper tracking and tracking goal conversion is vital to see if your marketing campaigns are working.

    It would be good to have a tutorial made by TMS exactly how to do this with Amelia. Google Tag Manager? Or perhaps put code on the thank you page which auto redirects to that page?

    TMS I'm sure tracks their goal tracking for Amelia so they can determine what their marketing spend on different campaigns (adwords, facebook, etc) works, and what doesn't work.

    I've seen the amelia analytics tutorial / video, which is great, but it would also be good to have an adwords tutorial as well!

  • Jessie replied

    I am also facing the same issue. both the short and long script do not redirect. Although the script is installed it will not automatically redirect to the thank you page.

  •  2,498
    Aleksandar replied

    Hi all.

    Amelia currently has the following hooks which work in the new form as well:

    <script>
    window.ameliaActions = {
      ViewContent: function (success = null, error = null, data) {
        //triggered when the form loads
        console.log('ViewContent HOOK')
        console.log(data)
        console.log('------------')
      },
      SelectService: function (success = null, error = null, data) {
        //triggered when the service is selected/changed in the form
        console.log('SelectService HOOK')
        console.log(data)
        console.log('------------')
      },
      SelectEmployee: function (success = null, error = null, data) {
        //triggered when the employee is selected/changed in the form
        console.log('SelectEmployee HOOK')
        console.log(data)
        console.log('------------')
      },
      SelectLocation: function (success = null, error = null, data) {
        //triggered when the location is selected/changed in the form
        console.log('SelectLocation HOOK')
        console.log(data)
        console.log('------------')
      },
      SelectCategory: function (success = null, error = null, data) {
        //triggered when the category is selected/changed in the form
        console.log('SelectCategory HOOK')
        console.log(data)
        console.log('------------')
      },
      SelectPackage: function (success = null, error = null, data) {
        //triggered when the package is selected/changed in the form
        console.log('SelectPackage HOOK')
        console.log(data)
        console.log('------------')
      },
      InitiateCheckout: function (success = null, error = null, data) {
        //triggered once the customer lands on the "info" page where they fill in their details
        console.log('InitiateCheckout HOOK')
        console.log(data)
        console.log('------------')
      },
      Schedule: function (success = null, error = null, data) {
        //triggered once the 'on-site' booking is completed
        console.log('Schedule HOOK')
        console.log(data)
        console.log('------------')
      },
      Purchased: function (success = null, error = null, data) {
        //triggered once an online booking is completed
        console.log('Purchased HOOK')
        console.log(data)
        console.log('------------')
      },
      beforeBooking: function (success = null, error = null, data) {
        //triggered when the "Confirm" button is clicked but before the booking is completed.
        //This hook currently doesn't work for Mollie and WooCommerce payments
        console.log('Before booking is created HOOK')
        console.log(data)
        console.log('------------')
      },
    }
    </script>

    These are the same hooks used in Google Analytics and Facebook Pixel integrations, but if you need some other hooks added, please let us know which ones and explain what they would contain and when they should be triggered.


    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables