{"id":32,"date":"2011-11-09T18:26:57","date_gmt":"2011-11-09T18:26:57","guid":{"rendered":"http:\/\/beta.robertprice.co.uk\/robblog\/2011\/11\/handling_http_and_https_ads_with_javascript-shtml\/"},"modified":"2011-11-09T18:26:57","modified_gmt":"2011-11-09T18:26:57","slug":"handling_http_and_https_ads_with_javascript-shtml","status":"publish","type":"post","link":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/","title":{"rendered":"Handling HTTP And HTTPS Ads With JavaScript"},"content":{"rendered":"<p>\nA few days ago I wrote about <a href=\"https:\/\/www.robertprice.co.uk\/robblog\/archive\/2011\/11\/Defering_Inline_JavaScript_Problems.shtml\">a problem I had with some javascript ad code defering execution<\/a>. Well another problem arose today with the code, and I thought I&#8217;d share the solution.\n<\/p>\n<p>\nSome pages on the site I&#8217;m developing on are served over https, others are served over http. They share a common template so the same ad code is served across all pages. At the moment they serve purely over http, and this is great most of the time, however when the page is served over https a security alert is shown asking the user if they want to show unsecure content. Most users would say no in this situation so our ads won&#8217;t be shown.\n<\/p>\n<p>\nWhat we need is a way for ads to be shown if a user is on a secure or normal connection.\n<\/p>\n<p>\nThankfully our ad provider allows us to request the same ad in either http or https by just changing the protocol, e.g. <code>http:\/\/ad...<\/code> or <code>https:\/\/ad...<\/code> .\n<\/p>\n<p>\nThe ad is written out using a <code>document.write<\/code> statement and is meant to be executed as the page is rendering.\n<\/p>\n<p>\nWe need to detect how the current page is being served, so we know what protocol to request the ad in.\n<\/p>\n<p>\nThis is easy in JavaScript, we can just query the value <code>document.location.protocol<\/code>. This returns either &#8216;http:&#8217; or &#8216;https:&#8217;. <em>Note the trailing colon&#8230;<\/em>\n<\/p>\n<p>\nWe can use the value <code>document.location.protocol<\/code> directly, but just incase another protocol has been used, we can default everything to http if https hasn&#8217;t been used. The following code will help here&#8230;\n<\/p>\n<div class=\"code\"><code><br \/>\nvar protocol = 'https:' == document.location.protocol ? 'https' : 'http';<br \/>\n<\/code><\/div>\n<p>\nHere we are seeing if <code>document.location.protocol<\/code> is the value &#8216;https:&#8217;, if it is set the value of <var>protocol<\/var> to &#8216;https&#8217;, else set it to &#8216;http&#8217;.\n<\/p>\n<p>\nLet&#8217;s look at the original ad code&#8230;\n<\/p>\n<div class=\"code\"><code><br \/>\n&lt;script type=\"text\/javascript\"&gt;<br \/>\n&lt;!--<br \/>\nif (window.adgroupid == undefined) {<br \/>\nwindow.adgroupid = Math.round(Math.random() * 1000);<br \/>\n}<br \/>\ndocument.write('&gt;scr'+'ipt language=\"javascript1.1\" src=\"http:\/\/adserver.adtech.de\/addyn|3.0|311.0|3328078|0|225|ADTECH;cookie=info;alias=FindClassicCars+Maserati+7+leaderboard;loc=100;target=_blank;key=key1+key2+key3+key4;grp='+window.adgroupid+';misc='+new Date().getTime()+'\"&gt;&lt;\/scri'+'pt&gt;');<br \/>\n\/\/--&gt;<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/div>\n<p>\nWe can take our earlier ternary expression to embed the protocol directly into the ad code like this.\n<\/p>\n<div class=\"code\"><code><br \/>\n&lt;script type=\"text\/javascript\"&gt;<br \/>\n&lt;!--<br \/>\nif (window.adgroupid == undefined) {<br \/>\nwindow.adgroupid = Math.round(Math.random() * 1000);<br \/>\n}<br \/>\ndocument.write('&gt;scr'+'ipt language=\"javascript1.1\" src=\"'+( 'https:'==document.location.protocol?'https':'http')  +':\/\/adserver.adtech.de\/addyn|3.0|311.0|3328078|0|225|ADTECH;cookie=info;alias=FindClassicCars+Maserati+7+leaderboard;loc=100;target=_blank;key=key1+key2+key3+key4;grp='+window.adgroupid+';misc='+new Date().getTime()+'\"&gt;&lt;\/scri'+'pt&gt;');<br \/>\n\/\/--&gt;<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/div>\n<p>\nThe ad code will now serve ads to our customers if they are on either a normal or secure page, and our ad team is happy again.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A few days ago I wrote about a problem I had with some javascript ad code defering execution. Well another problem arose today with the code, and I thought I&#8217;d share the solution. Some pages on the site I&#8217;m developing on are served over https, others are served over http. They share a common template &hellip; <a href=\"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Handling HTTP And HTTPS Ads With JavaScript&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[31,75],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-dev","tag-javascript","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Handling HTTP And HTTPS Ads With JavaScript - Robert Price<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handling HTTP And HTTPS Ads With JavaScript - Robert Price\" \/>\n<meta property=\"og:description\" content=\"A few days ago I wrote about a problem I had with some javascript ad code defering execution. Well another problem arose today with the code, and I thought I&#8217;d share the solution. Some pages on the site I&#8217;m developing on are served over https, others are served over http. They share a common template &hellip; Continue reading &quot;Handling HTTP And HTTPS Ads With JavaScript&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/\" \/>\n<meta property=\"og:site_name\" content=\"Robert Price\" \/>\n<meta property=\"article:published_time\" content=\"2011-11-09T18:26:57+00:00\" \/>\n<meta name=\"author\" content=\"rob\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rob\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/handling_http_and_https_ads_with_javascript-shtml\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/handling_http_and_https_ads_with_javascript-shtml\\\/\"},\"author\":{\"name\":\"rob\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"headline\":\"Handling HTTP And HTTPS Ads With JavaScript\",\"datePublished\":\"2011-11-09T18:26:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/handling_http_and_https_ads_with_javascript-shtml\\\/\"},\"wordCount\":343,\"keywords\":[\"JavaScript\",\"Web Development\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/handling_http_and_https_ads_with_javascript-shtml\\\/\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/handling_http_and_https_ads_with_javascript-shtml\\\/\",\"name\":\"Handling HTTP And HTTPS Ads With JavaScript - Robert Price\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\"},\"datePublished\":\"2011-11-09T18:26:57+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/handling_http_and_https_ads_with_javascript-shtml\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/handling_http_and_https_ads_with_javascript-shtml\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/handling_http_and_https_ads_with_javascript-shtml\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Handling HTTP And HTTPS Ads With JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\",\"name\":\"Robert Price\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\",\"name\":\"rob\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"caption\":\"rob\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Handling HTTP And HTTPS Ads With JavaScript - Robert Price","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/","og_locale":"en_GB","og_type":"article","og_title":"Handling HTTP And HTTPS Ads With JavaScript - Robert Price","og_description":"A few days ago I wrote about a problem I had with some javascript ad code defering execution. Well another problem arose today with the code, and I thought I&#8217;d share the solution. Some pages on the site I&#8217;m developing on are served over https, others are served over http. They share a common template &hellip; Continue reading \"Handling HTTP And HTTPS Ads With JavaScript\"","og_url":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/","og_site_name":"Robert Price","article_published_time":"2011-11-09T18:26:57+00:00","author":"rob","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rob","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/#article","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/"},"author":{"name":"rob","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"headline":"Handling HTTP And HTTPS Ads With JavaScript","datePublished":"2011-11-09T18:26:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/"},"wordCount":343,"keywords":["JavaScript","Web Development"],"articleSection":["Dev"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/","url":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/","name":"Handling HTTP And HTTPS Ads With JavaScript - Robert Price","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website"},"datePublished":"2011-11-09T18:26:57+00:00","author":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"breadcrumb":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertprice.co.uk\/robblog\/handling_http_and_https_ads_with_javascript-shtml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertprice.co.uk\/robblog\/"},{"@type":"ListItem","position":2,"name":"Handling HTTP And HTTPS Ads With JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website","url":"https:\/\/www.robertprice.co.uk\/robblog\/","name":"Robert Price","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robertprice.co.uk\/robblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5","name":"rob","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","caption":"rob"}}]}},"_links":{"self":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":0,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}