joseramoncajide
11/2/2016 - 7:12 PM

01_final.html

<!DOCTYPE html>
<html>
<head>
<title>Hola Mundo</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}
header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}
nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}
article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>    
    
    
</head>
<body>

<div class="container">

<header>
   <h1>Hola Mundo</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contactar</a></li>
  </ul>
</nav>

<article>
  <h1>Bienvenido</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo ex. Fusce dui neque, lobortis vel nibh quis, viverra bibendum turpis. Morbi in venenatis ex. </p>
  <p>Mauris vel auctor justo. Pellentesque vel malesuada purus. Vestibulum rhoncus finibus augue, scelerisque maximus arcu varius nec. Quisque venenatis vulputate nulla, ac commodo enim tincidunt quis. Cras lacus nisl, finibus sollicitudin semper nec, ultrices et lectus.</p>
  <button type="button" name="button" data-type="add_to_cart" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Añadir al carrito</button>
    
    
      <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" data-type="close_window">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <p>Producto añadido al carrito</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" data-type="close_window">Seguir comprando</button>
        </div>
      </div>
      
    </div>
  </div>

</article>

<footer>Copyright ©</footer>

</div> 
    
<script type="text/javascript">
    var sp=sp||[];(function(){var e=["init","identify","track","trackLink","pageview"],t=function(e){return function(){sp.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)sp[e[n]]=t(e[n])})(),sp.load=function(e,o){sp._endpoint=e;if(o){sp.init(o)};var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d21ey8j28ejz92.cloudfront.net/analytics/v1/sp.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};
    
    sp.load("http://awt.jrcajide.com:3001"); 
    
    sp.init({
        tracking_pageview: true,      
        cookie_name: "_sp",             
        cookie_expiration: 365   
    });
    sp.identify("007", {
        email: "jhondoe@gmail.com",
        age: 30,
        gender: "male"
    });
</script>    

<script>
//**** eventos ****//
          $(document).ready(function(){
            $('button').click(function(){
                sp.track('Click Button', {
                    button: $(this).data('type'),
                    loggedin: false
                });
            });
        });  
    
</script>    
    
</body>
</html>