180103_SDK업데이트,신규매체안내

In this example below you will see how to do a 180103_SDK업데이트,신규매체안내 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by luckybox7, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright luckybox7 ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>180103_SDK업데이트,신규매체안내</title>
  
  
  
  
  
</head>

<body>

  <html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>AirBridge</title>
</head>
<style>
  @import url(//s3-ap-northeast-1.amazonaws.com/udl-static/fonts/spoqa/ab_spoqasans.css);
  @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
  * {
    font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans",
      "Sans-serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
  }
  ::selection {
    background: #00a9fd;
    color: #fff;
  }
  button:hover {
    background: #1976d2;
    cursor: pointer;
  }
</style>

<body style="margin:0px;padding:0px;width:100%;">
  <table style="border-collapse:collapse;border-spacing:0;background-color:#000;width:100%;table-layout:fixed;background-image:url(https://static.airbridge.io/images/2017_brand/graphic_comp6.png);background-size:180px; background-position: 60% 80%;">
    <tbody>
      <tr>
        <td style="margin:0px 76px;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin: 0px auto;width:100%;max-width:600px;-webkit-border-radius: 3px 3px 0 0;border-radius: 3px 3px 0 0;overflow:hidden;">
              <tbody>
                <tr>
                  <td style="padding:30px 25px 0px;margin:0px;vertical-align:top;width:50%;text-align:right;">
                    <span style="display:block;width:100%;height:auto;padding:0px;">
                      <a href="http://blog.ab180.co/tag/airbridge-news/" target="_blank" style="color:#fff;font-weight:200;font-size:13px;text-decoration:none;">News Archive<img src="https://static.airbridge.io/images/2017_mail_img/ic_input_white.png" alt="" style="vertical-align:middle;padding-left:5px;width:12px;">
                      </a>
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
      <tr>
        <td style="padding:0px;margin:0px;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin: 0px auto;width:100%;max-width:600px;-webkit-border-radius: 3px 3px 0 0;border-radius: 3px 3px 0 0;overflow:hidden;">
              <tbody>
                <tr>
                  <td style="padding:50px 25px 30px;margin:0px;vertical-align:top;">
                    <table style="border-collapse:collapse;border-spacing:0;margin:0 auto;width:100%;">
                      <tbody>
                        <tr>
                          <td style="padding:0px;margin:0px;vertical-align:top;width:50%;text-align:left;">
                            <span style="display:block;width:130px;height:auto;padding:0px;">
                              <a href="https://airbridge.io/" target="_blank" style="margin:0px;padding:0px;text-decoration:none;">
                                <img src="https://static.airbridge.io/images/2017_brand/airbridge2017_logo.png" width="100%" style="display:block;border-width:0;">
                              </a>
                            </span>
                          </td>
                          <td style="padding:0;margin:0px;vertical-align:middle;text-align:right;">
                            <p style="margin:0px;padding:0px;vertical-align:middle;font-size:14px;font-weight:200;line-height:16px;color:#fff;text-decoration:none;letter-spacing:0.03em;word-break:keep-all;">One SDK, instant tracking for all ads</p>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>
  
  <table style="border-collapse:collapse;border-spacing:0;background-color:#fff;width:100%;table-layout:fixed;">
    <tbody>
      <tr>
        <td style="padding:0px;margin:0px;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin:0 auto;width:100%;max-width:600px;background-color:#fff;">
              <tbody>
                <tr>
                  <td style="padding:75px 28px 0px;vertical-align:top;text-align:left;">
                    <p style="margin:0px;padding:0px;vertical-align:top;font-size:26px;line-height:30px;letter-spacing:0.01em;color:#4d5256;font-weight:500;">2018, 1월 업데이트 뉴스
                    </p>
                    <hr>
                  </td>
                </tr>
                <tr>
                  <td style="color:#fff;cursor:auto;" align="center" valign="middle">
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>
  
  <table style="border-collapse:collapse;border-spacing:0;background-color:#fff;width:100%;table-layout:fixed;">
    <tbody>
      <tr>
        <td style="padding:0px;margin:0px;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin:0px auto;width:100%;max-width:600px;background-color:#fff;">
              <tbody>
                <tr>
                  <td style="padding:10px 0;margin:0px;vertical-align:top;">
                  </td>
                </tr>
                <tr>
                  <td style="padding:5px 25px 5px;margin:0px;vertical-align:top;">
                    <img src="https://static.airbridge.io/images/2018_mail_img/sdk_update_180103.gif" width="100%" style="display:block;border-width:0;">
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>
  
   <table style="border-collapse:collapse;border-spacing:0;background-color:#fff;width:100%;table-layout:fixed;">
    <tbody>
      <tr>
        <td style="padding:0px;margin:0px;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin:0px auto;width:100%;max-width:600px;background-color:#fff;">
              <tbody>
                <tr>
                  <td style="padding:0 28px 0px;margin:0px;vertical-align:top;">
                    <h1 style="margin:10px 0px 20px;padding:20px 0px 0px;vertical-align:top;letter-spacing:0.01em;color:#3a8bbb;font-size:20px;font-weight:500;line-height:28px;font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans","Sans-serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Arial, sans-serif;">SDK 기능 업데이트 - 버전 1.2.0</h1>
                    <p style="margin:0 0;padding:0 0 5px;line-height:28px;color:#42526E;font-weight:500;font-size:15px;word-break: keep-all;font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans","Sans-serif", -apple-system,linkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;"> 에어브릿지 SDK가 업데이트되면서 세부 기능이 추가되었습니다. 이벤트 전송시 디바이스 정보가 반드시 포함되도록 수정, 에어브릿지 이외의 딥링크를 자동으로 필터링하는 옵션 추가, 구매 이벤트의 경우 별도의 Transaction ID를 등록할 수 있는 옵션 추가 등 구체적인 SDK 업데이트 내역은 <a href="https://docs.airbridge.io/ko/tech/3-5-1.html">이용가이드</a>에서 확인해보세요.
                      <br/>
                      <br/> 특히 '앱 세션' 정책이 도입되어 정교한 사용자 행동 패턴 파악이 가능해졌습니다. 기존에는 앱의 최초실행 및 앱이 완전하게 종료된 후 재실행했을 때에 대해서만 '실행' 이벤트를 감지했다면, 앱이 완전하게 종료되지 않은 백그라운드 상황에서 세션 기준 시간인 5분이 지난 뒤 앱으로 진입할 경우에도 '실행' 이벤트를 감지하도록 변경하였습니다. 

                        <br/>
                      <h3 style="color:#3a8bbb;font-weight:400;font-size:13px;line-height:25px;word-break: keep-all;font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans","Sans-serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;">&#42; 예시)
                        <br/> 1. 앱 실행 -> 앱 종료 -> 재실행 = 실행 2회
                        <br/> 2. 앱 실행 -> 앱 종료하지 않고 백그라운드 진입 -> 5분 내 앱 진입 = 실행 1회
                        <br/> 3. 앱 실행 -> 앱 종료하지 않고 백그라운드 진입 -> 5분 이후 앱 진입 = 실행 2회
                        <br/>
                    </h3>
                      
                    </p> 
                    <hr>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>
  
  <table style="border-collapse:collapse;border-spacing:0;background-color:#fff;width:100%;table-layout:fixed;">
    <tbody>
      <tr>
        <td style="padding:0px;margin:0px;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin:0px auto;width:100%;max-width:600px;background-color:#fff;">
              <tbody>
                <tr>
                  <td style="padding:10px 0;margin:0px;vertical-align:top;">
                  </td>
                </tr>
                <tr>
                  <td style="padding:20px 25px 20px;margin:0px;vertical-align:top;">
                    <img src="https://static.airbridge.io/images/2018_mail_img/new_medium_logo_180103.png" width="100%" style="display:block;border-width:0;">
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>
  
  <table style="border-collapse:collapse;border-spacing:0;background-color:#fff;width:100%;table-layout:fixed;">
    <tbody>
      <tr>
        <td style="padding:0px;margin:0px;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin:0px auto;width:100%;max-width:600px;background-color:#fff;">
              <tbody>
                <tr>
                  <td style="padding:0 28px 0px;margin:0px;vertical-align:top;">
                    <h1 style="margin:10px 0px 20px;padding:20px 0px 0px;vertical-align:top;letter-spacing:0.01em;color:#3a8bbb;font-size:20px;font-weight:500;line-height:28px;font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans","Sans-serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Arial, sans-serif;">신규 유료광고 채널 추가</h1>
                    <p style="margin:0 0;padding:0 0 5px;line-height:28px;color:#42526E;font-weight:500;font-size:15px;word-break: keep-all;font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans","Sans-serif", -apple-system,linkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;">'neoclick', 'svgmedia' 등 2가지 신규 광고 채널이 추가되어 유료 광고 집행 시 포스트백 활용이 가능합니다. <br/>
신규로 추가된 광고 채널은 [에어브릿지 대시보드] > [트래킹 링크 생성] > [유료광고 채널] 에서 선택하여 사용하실 수 있으며, 광고 채널에 대한 포스트백 설정, 채널 기여기간 설정 등은 [에어브릿지 대시보드] > [유료광고 채널 관리] 에서 확인하실 수 있습니다. <br/> 현재 광고를 집행 중인 채널이 있다면 트래킹 링크를 생성하여 각 채널과 캠페인의 성과를 한눈에 비교해보세요!</p>
                    <h3 style="color:#3a8bbb;font-weight:400;font-size:13px;line-height:25px;word-break: keep-all;font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans","Sans-serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,   "Helvetica Neue", Arial, sans-serif;">&#42; 에어브릿지는 다양한 신규 광고 채널 연동을 위해 항상 노력하고 있습니다. 희망하는 채널이 있을 경우, 대시보드 우측 하단의 1:1문의로 전달주시면 우선적으로 연동하도록 하겠습니다 </h3>
                  </td>
                </tr>
                
                <tr>
                  <td style="padding:20px 25px 0px;cursor:auto;" align="center" valign="middle">
                    <a href="https://airbridge.io/d/#/app/{{ custom_data.appSubdomain }}" style="display:block;text-decoration:none;background:#0087F8;border-radius:2px;border:1px solid rgba(0,0,0,.12);color:#fff;font-size:14px;font-weight:300;padding:12px 30px;text-transform:uppercase;letter-spacing:0px;font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans","Sans-serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,   "Helvetica Neue", Arial, sans-serif;"
                      target="_blank">신규 채널 확인하러 가기</a>{{ content }}
                  </td>
                </tr>
                
                <tr>
                  <td style="padding:0px 28px 60px;margin:0px;vertical-align:top;">
                    <h3 style="letter-spacing:0.01em;color:#878d91;font-size:13px;font-weight:300;line-height:20px;">
                    </h3>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>
  
  <table style="border-collapse:collapse;border-spacing:0;background:#f8fafb;width:100%;table-layout:fixed;border-top:1px solid #e0e0e0;">
    <tbody>
      <tr>
        <td style="padding:0px;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin:0 auto;width:100%;max-width:600px;background-color:#f8fafb;">
              <tbody>
                <tr>
                  <td style="padding:50px 28px 10px;vertical-align:top;text-align:center;">
                    <p style="margin:0px;padding:0px;vertical-align:top;font-size:13px;line-height:23px;letter-spacing:0.01em;color:#878d91;font-weight:300;font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans","Sans-serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,   "Helvetica Neue", Arial, sans-serif;">
                      하나의 SDK로 여러 채널의 앱 마케팅 성과를 실시간으로 정확하게 파악해보세요.
                    </p>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>
  
  <table style="border-collapse:collapse;border-spacing:0;background-color:#f8fafb;width:100%;table-layout:fixed;">
    <tbody>
      <tr>
        <td style="padding:0px;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin:0 auto;width:100%;max-width:600px;background-color:#f8fafb;-webkit-border-radius: 0 0 3px 3px;border-radius: 0 0 3px 3px;overflow:hidden;">
              <tbody>
                <tr>
                  <td style="padding:0px 28px;vertical-align:top;">
                    <p style="margin:0;font-size:12px;letter-spacing:0.02em;text-align:center;">
                      <a href="https://www.facebook.com/ab180.co" target="_blank" style="margin:0px;padding:0px;vertical-align:top;color:#878d91;text-decoration:none;font-weight:300;">facebook</a>
                      <span style="color:#878d91;font-weight:normal;display:inline-block;margin:0px 5px;padding:0px;">┃</span>
                      <a href="https://www.linkedin.com/company/ab180" target="_blank" style="margin:0px;padding:0px;vertical-align:top;color:#878d91;text-decoration:none;font-weight:300;">linkedin</a>
                      <span style="color:#878d91;font-weight:normal;display:inline-block;margin:0px 5px;padding:0px;">┃</span>
                      <a href="https://airbridge.io/" target="_blank" style="margin:0px;padding:0px;vertical-align:top;color:#878d91;text-decoration:none;font-weight:300;">view on web</a></p>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>
  
  <table style="border-collapse:collapse;border-spacing:0;background-color:#f8fafb;width:100%;table-layout:fixed;">
    <tbody>
      <tr>
        <td style="padding:0;vertical-align:top;">
          <center>
            <table style="border-collapse:collapse;border-spacing:0;margin:0px auto;max-width:600px;">
              <tbody>
                <tr>
                  <td style="padding:20px 28px 70px;vertical-align:top;font-size:12px;line-height:18px;letter-spacing:0.02em;text-align:center;">
                    <p style="margin:0px;padding:0px;vertical-align:top;font-size:13px;line-height:25px;letter-spacing:0.01em;color:#878d91;font-weight:300;font-family: "Spoqa Han Sans", "Spoqa Han Sans JP", "SpoqaHanSans","Sans-serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,   "Helvetica Neue", Arial, sans-serif;">궁금하거나 불편한 점은
                      <a href="mailto:contact@ab180.co" target="_blank" style="color:#878d91;text-decoration:underline;">contact@ab180.co
                      </a> 로 문의해주세요.
                      <br> 2017. ab180 All Right Reserved.
                    </p>
                    <span style="color: #878d91 ; text-decoration: none;">{{ unsubscribe_link }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </center>
        </td>
      </tr>
    </tbody>
  </table>

</body>

</html>
  
  

</body>

</html>

Comments