Capture url, browser and browser version, and put it in body of an email

Question

I have a website with thousands of pages with all kinds of things that can go wrong as technology and devices progress (www.toilette-humor.com). I need to add a link on every page that will allow users to "REPORT A PROBLEM". So I need to capture the following info and have it email off to me:

What URL they saw the problem on
What Browser and Version they are using

and if possible...

What Operating System they are using
What Platform/Device they are using

I have found some code here to answer the first issue of capturing the URL and putting it in the body of an email, AND I found some other code for capturing the browser and version, but that code doesn't add it to an email.

I know absolutely nothing about writing Javascript what so ever. So I ask you all, how can I combine the two scripts, or is there a better solution.

Script One (Captures URL and add's it to body of email) found here: How to write in 'mailto' body link to current page

<head>
<script>
    function SendLinkByMail(href) {
        var subject= "Report a Problem";
        var body = "There is a problem with this webpage:\r\n\r\n<";
        body += window.location.href;
        body += ">";
        var uri = "mailto:?subject=";
        uri += encodeURIComponent(subject);
        uri += "&body=";
        uri += encodeURIComponent(body);
        window.location.href = uri;
    }
</script>
</head>

<body>
    <p><a href="javascript:(function()%7BSendLinkByMail()%3B%7D)()%3B">Email link to this page</a></p>
</body>

Script Two (Captures Browser and Version) found here: How can you detect the version of a browser?

<script>
    navigator.sayswho= (function(){
        var ua= navigator.userAgent, tem, 
        M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
        if(/trident/i.test(M[1])){
            tem=  /\brv[ :]+(\d+(\.\d+)?)/g.exec(ua) || [];
            return 'IE '+(tem[1] || '');
        }
        M= M[2]? [M[1], M[2]]:[navigator.appName, navigator.appVersion, '-?'];
        if((tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
        return M.join(' ');
    })();
</script>

Thank you all in advance for your time and knowledge.

Where did you find the HTML bit? Looks like some extra code that you don't want `%7B` etc. — putvande, Jan 15 '14 at 18:28
Look down a few comments on this page: http://stackoverflow.com/questions/7977165/how-to-write-in-mailto-body-link-to-current-page That code does work fine for me. Just need to figure out how to add more info to the body (browser and version) — BGyver, Jan 15 '14 at 18:45

score 0 · Accepted Answer · answered Jan 15 '14 at 19:52

0

As an FYI, you shouldn't be using javascript links, but we'll deal with that in a second.

If you want to add the userAgent to the body, you can do this:

function SendLinkByMail(href) {
    var subject= "Report a Problem";
    var body = "There is a problem with this webpage:\r\n\r\n<";
    body += window.location.href;
    body += ">";
    body += navigator.userAgent;
    var uri = "mailto:?subject=";
    uri += encodeURIComponent(subject);
    uri += "&body=";
    uri += encodeURIComponent(body);
    window.location.href = uri;
}

If you want to use that odd function you've got there, you could just change the navigator.userAgent line to read navigator.sayswho().

Additionally, you should be attaching the action using an event listener:

<body>
    <p class="send-email">Email link to this page</p>
    <script>
        var send = document.getElementsByClassName('send-email')[0];
        send.attachEvent? send.attachEvent('click', SendLinkByMail) : send.addEventListener('click', SendLinkByMail);
    </script>
</body>

But this is still sort of a leaky way to send an e-mail since if the user uses a webmail client mailto: links are unlikely to work without extra setup work from the user.

answered Jan 15 '14 at 19:52

tkone

22,092
5
54
78

Thank you for replying. I thought the mailto: might be an issue for that exact reason. The scripting above to date has been all that I could find so far. My Google Foo at this point has not been able to find a good piece of code to fix my issue. I am thinking I might need to change my direction to a form that could be populated with the info I need, and then submitted that way instead of going through the users email program, but that would be for another topic I suppose. I will try your script above. Thank you again – BGyver Jan 15 '14 at 20:21
Yes, that did exactly what my title was looking for. I will look into a better way to do this next other then the mailto: issue that you brought up. Kind regards – BGyver Jan 15 '14 at 20:28
@BGyver the "proper" way to do this is to send the mail from your backend but that's a massive can of worms to open. This way does suffice for a set number of use-cases – tkone Jan 16 '14 at 02:23
@BGyver also if this works you should upvote/accept the answer so others know it's a working solution to the issue. – tkone Jan 16 '14 at 02:24

Capture url, browser and browser version, and put it in body of an email

1 Answers1