diff --git a/web/app/assets/javascripts/everywhere/everywhere.js b/web/app/assets/javascripts/everywhere/everywhere.js index d0bf3e405..847a691ee 100644 --- a/web/app/assets/javascripts/everywhere/everywhere.js +++ b/web/app/assets/javascripts/everywhere/everywhere.js @@ -23,6 +23,14 @@ var shutdownDialog = new JK.ShutdownDialog(app); shutdownDialog.initialize(); + var googleHelper = new JK.GoogleHelper(app); + JK.GoogleHelperInstance = googleHelper; + googleHelper.initialize(); + + var twitterHelper = new JK.TwitterHelper(app); + JK.TwitterHelperInstance = twitterHelper; + twitterHelper.initialize(gon.global.twitter_public_account); + var facebookHelper = new JK.FacebookHelper(app); JK.FacebookHelperInstance = facebookHelper; facebookHelper.initialize(gon.global.facebook_app_id); @@ -35,7 +43,6 @@ JK.TextMessageDialogInstance = textMessageDialog; textMessageDialog.initialize(); - var friendSelectorDialog = new JK.FriendSelectorDialog(app); JK.FriendSelectorDialogInstance = friendSelectorDialog; friendSelectorDialog.initialize(); diff --git a/web/app/assets/javascripts/facebook_helper.js b/web/app/assets/javascripts/facebook_helper.js index 5846824ef..67839c5bc 100644 --- a/web/app/assets/javascripts/facebook_helper.js +++ b/web/app/assets/javascripts/facebook_helper.js @@ -72,13 +72,19 @@ js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); + + deferredLoginStatus() + .done(function() { + FB.Event.subscribe('edge.create', function(response) { + JK.GA.trackJKSocial(JK.GA.Categories.jkFollow, JK.GA.JKSocialTargets.facebook, JK.clientType()); + }); + }); + } this.initialize = initialize; this.promptLogin = promptLogin; this.deferredLoginStatus = deferredLoginStatus; + this.ready = deferredLoginStatus; // shorter alias for deferredLoginStatus }; - - - })(window, jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/google_helper.js b/web/app/assets/javascripts/google_helper.js new file mode 100644 index 000000000..e3239de75 --- /dev/null +++ b/web/app/assets/javascripts/google_helper.js @@ -0,0 +1,23 @@ +(function(context,$) { + "use strict"; + + context.JK = context.JK || {}; + context.JK.GoogleHelper = function(app) { + var logger = context.JK.logger; + var googleReadyDeferred = null; + var $self = $(this); + var connected = false; + + function ready() { + return googleReadyDeferred; + } + + function initialize(_twitterPublicAccountName) { + googleReadyDeferred = $.Deferred(); + return this; + } + + this.initialize = initialize; + this.ready = ready; + }; +})(window, jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/landing/landing.js b/web/app/assets/javascripts/landing/landing.js index 117c9bac9..caf518ddb 100644 --- a/web/app/assets/javascripts/landing/landing.js +++ b/web/app/assets/javascripts/landing/landing.js @@ -22,6 +22,8 @@ //= require globals //= require AAB_message_factory //= require facebook_helper +//= require twitter_helper +//= require google_helper //= require layout //= require user_dropdown //= require jamkazam diff --git a/web/app/assets/javascripts/twitter_helper.js b/web/app/assets/javascripts/twitter_helper.js new file mode 100644 index 000000000..849f09714 --- /dev/null +++ b/web/app/assets/javascripts/twitter_helper.js @@ -0,0 +1,45 @@ +(function(context,$) { + "use strict"; + + context.JK = context.JK || {}; + context.JK.TwitterHelper = function(app) { + var logger = context.JK.logger; + var twitterReadyDeferred = null; + var $self = $(this); + var connected = false; + + function ready() { + return twitterReadyDeferred; + } + + function initialize(_twitterPublicAccountName) { + twitterReadyDeferred = $.Deferred(); + + context.twttr = (function (d,s,id) { + var t, js, fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; + js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); + return context.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); + }(document, "script", "twitter-wjs")); + + context.twttr.ready(function (twttr) { + // bind events here + twitterReadyDeferred.resolve(); + }); + + ready() + .done(function() { + context.twttr.events.bind('follow', function (event) { + var followedUserId = event.data.user_id; + var followedScreenName = event.data.screen_name; + JK.GA.trackJKSocial(JK.GA.Categories.jkFollow, JK.GA.JKSocialTargets.twitter, JK.clientType()); + }); + }) + + return this; + } + + this.initialize = initialize; + this.ready = ready; + }; +})(window, jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/web/web.js b/web/app/assets/javascripts/web/web.js index dc132c5e5..86f8d3bf3 100644 --- a/web/app/assets/javascripts/web/web.js +++ b/web/app/assets/javascripts/web/web.js @@ -22,6 +22,8 @@ //= require globals //= require AAB_message_factory //= require facebook_helper +//= require twitter_helper +//= require google_helper //= require web/signup_helper //= require web/signin_helper //= require extras diff --git a/web/app/assets/stylesheets/client/jamkazam.css.scss b/web/app/assets/stylesheets/client/jamkazam.css.scss index 1a173dd70..8810ede99 100644 --- a/web/app/assets/stylesheets/client/jamkazam.css.scss +++ b/web/app/assets/stylesheets/client/jamkazam.css.scss @@ -573,4 +573,24 @@ hr { body.jam .icheckbox_minimal { display:inline-block; position:relative; +} + +.follow-links { + + .facebook-follow-btn { + margin-right:5px; + margin-top:-2px; + display:inline-block; + } + + .twitter-follow-btn { + margin-right:5px; + display:inline-block; + } + + .g-follow-btn { + display:inline-block; + } + + } \ No newline at end of file diff --git a/web/app/assets/stylesheets/landings/landing_page.css.scss b/web/app/assets/stylesheets/landings/landing_page.css.scss index 8498e9f20..e30c5ef3a 100644 --- a/web/app/assets/stylesheets/landings/landing_page.css.scss +++ b/web/app/assets/stylesheets/landings/landing_page.css.scss @@ -9,13 +9,39 @@ body.web.landing_page { display:none; } - &.wb_2 { - .landing-content { - h1 { - margin-left:120px; - } + &.wo_1 { + .landing-content h1 { + margin-left:45px; } } + &.wo_3 { + .landing-content h1 { + margin-left:55px; + } + } + &.wb_2 { + .landing-content h1 { + margin-left:120px; + } + } + &.wb_3 { + .landing-content h1 { + margin-left:130px; + } + } + + .landing-tag { + font-size:14px; + position: absolute; + left: 60%; + top: 25px; + margin: 0; + + h1 { + color: $ColorScreenPrimary !important; + } + } + .landing-content { h1 { @@ -23,18 +49,6 @@ body.web.landing_page { font-size:20px; font-weight:normal; } - .column { - float:left; - @include border_box_sizing; - - &:nth-child(1) { - width:60%; - } - - &:nth-child(2) { - width:40%; - } - } .buzz { margin-top:55px; @@ -88,30 +102,70 @@ body.web.landing_page { a { margin-top:40px; } + + .follow-links { + margin-top:40px; + line-height: 10px; // centers all 3 buttons vertically on the same line + margin-left:28px; + } } } &.full { + .column { + float:left; + @include border_box_sizing; - } + &:nth-child(1) { + width:60%; + } - &.tight { - - } - - - .landing-tag { - - font-size:14px; - position: absolute; - left: 60%; - top: 25px; - margin: 0; - - h1 { - color: $ColorScreenPrimary !important; + &:nth-child(2) { + width:40%; + } } } + &.tight { + .video-wrapper { + margin:auto; + } + + .landing-content h1 { + text-align:center; + margin:0; + } + + .landing-tag { + left:68%; + } + + .video-container { + width:55%; + margin:20px auto 30px; + position: relative; + padding-bottom: 25.00%; + padding-top: 30px; height: 0; overflow: hidden; + } + + .column { + float:left; + @include border_box_sizing; + + &:nth-child(1) { + width:50%; + padding-left:13%; + } + + &:nth-child(2) { + width:50%; + padding-left:4%; + } + } + + .more-container { + margin-top:0; + } + } } diff --git a/web/app/controllers/landings_controller.rb b/web/app/controllers/landings_controller.rb index 65d72cec7..0249897d7 100644 --- a/web/app/controllers/landings_controller.rb +++ b/web/app/controllers/landings_controller.rb @@ -3,7 +3,6 @@ class LandingsController < ApplicationController respond_to :html def watch_bands - @promo_buzz = PromoBuzz.active if Rails.application.config.use_promos_on_homepage @@ -22,5 +21,33 @@ class LandingsController < ApplicationController render 'watch_bands_1', layout: 'web' end end + + def watch_overview + @promo_buzz = PromoBuzz.active + + if Rails.application.config.use_promos_on_homepage + @promo_latest = PromoLatest.active + else + @promo_latest, start = Feed.index(nil, limit: 10) + end + + page = params['p'].to_i + + if page == 2 + render 'watch_overview_2', layout: 'web' + elsif page == 3 + render 'watch_overview_3', layout: 'web' + else + render 'watch_overview_1', layout: 'web' + end + end + + def watch_bands_tight + render 'watch_bands_tight', layout: 'web' + end + + def watch_overview_tight + render 'watch_overview_tight', layout: 'web' + end end diff --git a/web/app/views/landings/watch_bands_1.html.slim b/web/app/views/landings/watch_bands_1.html.slim index 219b9f8fe..0815eeefd 100644 --- a/web/app/views/landings/watch_bands_1.html.slim +++ b/web/app/views/landings/watch_bands_1.html.slim @@ -1,4 +1,4 @@ -- provide(:page_name, 'landing_page wb_1') +- provide(:page_name, 'landing_page full wb_1') .column h1 Watch 6 Bands Play Together from Different Locations diff --git a/web/app/views/landings/watch_bands_2.html.slim b/web/app/views/landings/watch_bands_2.html.slim index 328b9c9fc..c3470c000 100644 --- a/web/app/views/landings/watch_bands_2.html.slim +++ b/web/app/views/landings/watch_bands_2.html.slim @@ -1,4 +1,4 @@ -- provide(:page_name, 'landing_page wb_2') +- provide(:page_name, 'landing_page full wb_2') .column h1 See How JamKazam Works diff --git a/web/app/views/landings/watch_bands_3.html.slim b/web/app/views/landings/watch_bands_3.html.slim index 66b876a1a..7c2668f7c 100644 --- a/web/app/views/landings/watch_bands_3.html.slim +++ b/web/app/views/landings/watch_bands_3.html.slim @@ -1,4 +1,4 @@ -- provide(:page_name, 'landing_page wb_3') +- provide(:page_name, 'landing_page full wb_3') .column h1 See How to Get Started diff --git a/web/app/views/landings/watch_bands_tight.html.slim b/web/app/views/landings/watch_bands_tight.html.slim new file mode 100644 index 000000000..8a1b204d7 --- /dev/null +++ b/web/app/views/landings/watch_bands_tight.html.slim @@ -0,0 +1,16 @@ +- provide(:page_name, 'landing_page tight wbt_1') + +h1 Watch 6 Bands Play Together from Different Locations +.video-wrapper + .video-container + iframe src="//www.youtube.com/embed/I2reeNKtRjg" frameborder="0" allowfullscreen +.row + .column + .cta-container + h2 It's FREE! Ready to Go? + = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup" + .column + .more-container + h2 Not a Good Time to Sign Up? + = render :partial => 'users/follow_links' + br clear="all" \ No newline at end of file diff --git a/web/app/views/landings/watch_overview_1.html.slim b/web/app/views/landings/watch_overview_1.html.slim new file mode 100644 index 000000000..6895a6028 --- /dev/null +++ b/web/app/views/landings/watch_overview_1.html.slim @@ -0,0 +1,17 @@ +- provide(:page_name, 'landing_page full wo_1') + +.column + h1 Watch Video to See How JamKazam Works + .video-wrapper + .video-container + iframe src="//www.youtube.com/embed/ylYcvTY9CVo" frameborder="0" allowfullscreen + .cta-container + h2 It's FREE! Ready to Go? + = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup" +.column + = render :partial => "users/buzz", locals: {header: 'From Our Community'} + .more-container + h2 Need to Know More? + = link_to 'Watch 6 Bands Play Using JamKazam', landing_wo_path(p: 2), class: 'landing_wb' + +br clear="all" \ No newline at end of file diff --git a/web/app/views/landings/watch_overview_2.html.slim b/web/app/views/landings/watch_overview_2.html.slim new file mode 100644 index 000000000..56503906b --- /dev/null +++ b/web/app/views/landings/watch_overview_2.html.slim @@ -0,0 +1,17 @@ +- provide(:page_name, 'landing_page full wo_2') + +.column + h1 Watch 6 Bands Play Together from Different Locations + .video-wrapper + .video-container + iframe src="//www.youtube.com/embed/I2reeNKtRjg" frameborder="0" allowfullscreen + .cta-container + h2 It's FREE! Ready to Go? + = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup" +.column + = render :partial => "users/buzz", locals: {header: 'From Our Community'} + .more-container + h2 Still Need More Info? + = link_to 'See How to Get Started Using JamKazam', landing_wo_path(p: 3), class: 'landing_wb' + +br clear="all" \ No newline at end of file diff --git a/web/app/views/landings/watch_overview_3.html.slim b/web/app/views/landings/watch_overview_3.html.slim new file mode 100644 index 000000000..09130db84 --- /dev/null +++ b/web/app/views/landings/watch_overview_3.html.slim @@ -0,0 +1,17 @@ +- provide(:page_name, 'landing_page full wo_3') + +.column + h1 See How to Get Started Using JamKazam + .video-wrapper + .video-container + iframe src="//www.youtube.com/embed/DBo--aj_P1w" frameborder="0" allowfullscreen + .cta-container + h2 It's FREE! Ready to Go? + = link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup" +.column + = render :partial => "users/buzz", locals: {header: 'From Our Community'} + .more-container + h2 Not a Good Time to Sign Up? + = render :partial => 'users/follow_links' + +br clear="all" \ No newline at end of file diff --git a/web/app/views/layouts/web.html.erb b/web/app/views/layouts/web.html.erb index d3c81fbad..ae0afc893 100644 --- a/web/app/views/layouts/web.html.erb +++ b/web/app/views/layouts/web.html.erb @@ -127,6 +127,8 @@ <%= render "shared/ga" %> - + <%= render "shared/twttr" %> + <%= render "shared/facebook_sdk" %> + diff --git a/web/app/views/shared/_facebook_sdk.html.slim b/web/app/views/shared/_facebook_sdk.html.slim new file mode 100644 index 000000000..f1ba82ae2 --- /dev/null +++ b/web/app/views/shared/_facebook_sdk.html.slim @@ -0,0 +1 @@ +script src="https://apis.google.com/js/platform.js" async defer \ No newline at end of file diff --git a/web/app/views/shared/_twttr.html.slim b/web/app/views/shared/_twttr.html.slim new file mode 100644 index 000000000..e69de29bb diff --git a/web/app/views/users/_follow_links.html.slim b/web/app/views/users/_follow_links.html.slim index 825990714..2f0880da0 100644 --- a/web/app/views/users/_follow_links.html.slim +++ b/web/app/views/users/_follow_links.html.slim @@ -1 +1,10 @@ -.fb-like data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" \ No newline at end of file +.follow-links + .facebook-follow-btn + .fb-like data-href="https://www.facebook.com/JamKazam" data-layout="button" data-action="like" + + .twitter-follow-btn + a href="https://twitter.com/#{Gon.global.twitter_public_account}" class="twitter-follow-button" data-show-count="false" + = "Follow @#{Gon.global.twitter_public_account}" + + .g-follow-btn + .g-follow data-annotation="none" data-height="20" data-href="https://plus.google.com/106619885929396862606" data-rel="publisher" diff --git a/web/config/application.rb b/web/config/application.rb index 6ad4d576e..802416f62 100644 --- a/web/config/application.rb +++ b/web/config/application.rb @@ -204,6 +204,7 @@ if defined?(Bundler) config.twitter_app_id = ENV['TWITTER_APP_ID'] || 'nQj2oEeoJZxECC33tiTuIg' config.twitter_app_secret = ENV['TWITTER_APP_SECRET'] || 'Azcy3QqfzYzn2fsojFPYXcn72yfwa0vG6wWDrZ3KT8' + config.twitter_public_account = 'jamkazam' config.autocheck_create_session_agreement = false; diff --git a/web/config/initializers/gon.rb b/web/config/initializers/gon.rb index bd840b32f..14f3b65bb 100644 --- a/web/config/initializers/gon.rb +++ b/web/config/initializers/gon.rb @@ -1,3 +1,4 @@ Gon.global.facebook_app_id = Rails.application.config.facebook_app_id Gon.global.ftue_network_test_packet_size = Rails.application.config.ftue_network_test_packet_size +Gon.global.twitter_public_account = Rails.application.config.twitter_public_account Gon.global.env = Rails.env diff --git a/web/config/routes.rb b/web/config/routes.rb index 3045283a4..8e2802ae5 100644 --- a/web/config/routes.rb +++ b/web/config/routes.rb @@ -22,7 +22,10 @@ SampleApp::Application.routes.draw do match '/signout', to: 'sessions#destroy', via: :delete # landing pages - match '/landing/wb', to: 'landings#watch_bands', via: :get, as: 'landing_wb' + match '/landing/wb', to: 'landings#watch_bands', via: :get, as: 'landing_wb' + match '/landing/wo', to: 'landings#watch_overview', via: :get, as: 'landing_wo' + match '/landing/wbt', to: 'landings#watch_bands_tight', via: :get, as: 'landing_wbt' + match '/landing/wot', to: 'landings#watch_overview_tight', via: :get, as: 'landing_wot' # oauth match '/auth/:provider/callback', :to => 'sessions#oauth_callback' diff --git a/web/spec/features/alt_landing_spec.rb b/web/spec/features/alt_landing_spec.rb new file mode 100644 index 000000000..867f546ea --- /dev/null +++ b/web/spec/features/alt_landing_spec.rb @@ -0,0 +1,33 @@ +require 'spec_helper' + +describe "Alternate Landing Pages", :js => true, :type => :feature, :capybara_feature => true do + + subject { page } + + it "landing-page watch-bands" do + visit landing_wb_path + find('h1', text: 'Watch 6 Bands Play Together from Different Locations') + find('a.landing_wb', text: 'Watch a Video to See How JamKazam Works').trigger(:click) + find('h1', text: 'See How JamKazam Works') + find('a.landing_wb', text: 'Watch a Video to See How to Get Started').trigger(:click) + find('h1', text: 'See How to Get Started') + find('div.fb-like') + find('iframe.twitter-follow-button') + find('.g-follow-btn iframe') + end + + it "landing-page watch-overview" do + visit landing_wo_path + find('h1', text: 'Watch Video to See How JamKazam Works') + find('a.landing_wb', text: 'Watch 6 Bands Play Using JamKazam').trigger(:click) + find('h1', text: 'Watch 6 Bands Play Together from Different Locations') + find('a.landing_wb', text: 'See How to Get Started Using JamKazam').trigger(:click) + find('h1', text: 'See How to Get Started Using JamKazam') + find('div.fb-like') + find('iframe.twitter-follow-button') + find('.g-follow-btn iframe') + end + + + +end