블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

calendar

        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  


iOS 6 부터 모바일 사파리 브라우저에 아주 재밌는 기능이 추가 됐었네요.

바로 어플리케이션에 대한 배너광고를 달아주는건데요.
해당 앱이 깔려 있으면 open 버튼이 나오고 깔려 있지 않으면 앱스토어로 링크를 걸어 줍니다.


그리고 그 링크에는 파라미터를 넣을 수 있어서 어플리케이션을 열 때 해당 파라미터를 전달 받아서 앱의 특정 페이지를 열거나 어떤 상황이 되도록 구현할 수도 있구요.

해당 앱이 그 디바이스에서 실행 가능한지도 자동으로 판별해서 지원하지 않는 디바이스이면 이 배너광고가 나오지 않습니다.


그리고 물론 iOS 버전도 자동으로 체크해서 지원하지 않는 버전이면 이 배너 광고가 나오지 않구요.

이 기능은 간단히 메타태그 한 줄로 처리 가능하도록 했네요.


웹 싸이트 만들 때 사용할 만 한데요.

이 기능은 CNN 사이트 접속했다가 나오길래 신기해서 여기저기 검색해 보고 알아 낸 겁니다.



괜찮은 기능인 것 같아서 일단 애플에서 제공하는 문서를 아래  번역해 뒀습니다.

나중에 유용하게 써 먹을 수 있을 것 같네요.


Promoting Apps with Smart App Banners


iOS 6 버전부터 Safari browser 에 smart App Banner 기능이 추가 됐습니다. 아래 그림에서 보듯이 이 기능은 웹사이트에서 앱 스토어의 앱을 promoting 하는 표준화된 방법을 제공합니다.


Figure 7-1  A Smart App Banner of the Apple Store app


Note: Smart App Banner는 iOS 에서만 보여지고 OS X에서는 보여지지 않습니다.



Smart App Banner는 다른 promotional method들과 비교해서 유저의 browsing experience 면에서 획기적으로 개선 됐습니다. 이 배너는 iOS6 에 implement 되서 웹상에서 일관된 look and feel을 제공해 유저가 알아보기 쉽게 되었습니다. 유저는 이 배너를 tap 하면 다른 third-party 광고가 아니라 앱스토어로 가게 된다는 사실을 신뢰할 수 있게 됐습니다. 이 배너는 웹페이지 상단에 나타납니다. full screen 으로 나타나 웹 콘텐츠를 가리지 않습니다. 그리고 크고 알아보기 쉬운 close button 이 있어 유저가 쉽게 이 배너를 닫을 수 있습니다.


앱이 이미 유저의 디바이스에 인스톨 돼 있으면 이 배너는 다른 모습으로 보이게 됩니다. 유저가 이 배너를 tap 하면 그 깔려 있는 앱이 열리게 되죠. 그리고 만약 유저의 디바이스에 해당 앱이 없다면 배너를 tab 하면 앱스토어의 해당 앱 페이지를 open 하게 됩니다. 유저가 웹사이트로 되돌아오면 배너에 progress bar 가 나타나 이 앱이 다운로드 되는 상황을 알려 줍니다. 앱이 다운로드를 끝마치게 되면 View button 은 open button 으로 바뀌게 됩니다. 이 때 배너를 tap 하면 해당 앱이 open 되죠.


Smart App Banner는 자동으로 해당 앱이 유저 디바이스에서 지원이 되는지 여부를 판단합니다. 그래서 유저의 디바이스가 이 배너기능을 지원하지 않거나 해당 앱이 실행되지 않는 환경이라면 자동으로 이 배너는 나타나지 않게 됩니다.


Implementing a Smart App Banner on Your Website


여러분 웹사이트에 Smart App Banner 를 구현하시려면 페이지의 헤더 안에 아래 메타 태그를 넣어 주세요.

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">


콤마(,) 로 나눠지는 세개의 파라미터가 있는데요. 그 내용은 아래와 같습니다.


  • app-id: (Required.) 여러분 앱의 unique identifier. iTunes Link Maker 에서 여러분 앱 ID 를 찾으려면 Search Field 에서 여러분 앱 이름을 넣으세요. 그리고 해당 국가와 media type 을 선택하세요. 그리고 여러분 앱을 찾아서 오른쪽 column 에 있는 iPhone App Link 를 선택하세요. 여러분의 앱 아이디는 id 와 ?mt 사이에 있는 9자리 숫자입니다.

  • affiliate-data: (Optional.) 여러분의 iTunes affiliate string 입니다. 만약 여러분이 iTunes affiliate 이 아니라면 http://www.apple.com/itunes/affiliates/ 에서 좀 더 자세한 사항을 읽어 보세요.

  • app-argument: (Optional.) 여러분 native app 에게 context를 제공하는 URL. 이 파라미터를 사용하고 유저의 디바이스에 여러분 앱이 인스톨 돼 있다면 여러분의 iOS app 의 특정 지점을 open 할 수 있습니다. 이 기능은 navigational context 를 보유하고 있을 경우 유용합니다.

    • 만약 유저가 웹사이트의 navigational hierarchy 내 깊이 들어와 있다면 해당 document's entire URL을 pass 할 수 있습니다. 그리고 그것을 여러분 앱에서 parse 해서 앱 내의 적당한 곳이 open 되게 할 수 있습니다.

    • 만약 유저가 웹사이트에서 search를 하면 그 query string을 pass 할 수도 있습니다. 그래서 자연스럽게 앱내에서도 그 search가 작동하도록 할 수 있습니다.

    • 유저가 creating content 중이라면 해당 seesion ID를 pass 해서 앱내의 웹 세션 state를 다운로드 하도록 할수도 있습니다.

    server side script로 각 페이지의 app-argument를 dynamic하게 생성할 수도 있습니다. 그래서 여러분이 원하는 URL을 동적으로 생성할 수 있습니다.


Providing Navigational Context to Your App


app delegate로 application:openURL:sourceApplication:annotation: method를 구현하면 해당 URL을 가지고 앱이 시작할 때 어떤 동작을 fire 할 수 있습니다. 즉 pass 한 URL을 interpret 해서 어떤 로직을 만들 수 있죠. app-argument parameter에 세팅한 값은 NSURL url object로서 활용 가능합니다.


Listing 7-1 에제는 native iOS app에 데이터를 pass 하는 웹사이트를 염두에 두고 작성한 겁니다. 이 기능을 구현하기 위해 URL이 string /profile를 포함하고 있는지 여부를 감지합니다.만약 있으면 profile view controller 를 열고 query string에 있는 해당 profile ID number를 pass 합니다.


Listing 7-1  Routing the user to the correct view controller

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
    // in this example, the URL from which the user came is http://example.com/profile/?12345
    // determine if the user was viewing a profile
    if ([[url path] isEqualToString:@"/profile"]) {
        // switch to profile view controller
        [self.tabBarController setSelectedViewController:profileViewController];
        // pull the profile id number found in the query string
        NSString *profileID = [url query];
        // pass profileID to profile view controller
        [profileViewController loadProfile:profileID];
    }
    return YES;
}





저작자 표시 비영리 동일 조건 변경 허락
신고


이번에 회사에서 모바일 VPN 앱인 Junos Pulse를 이용할 것 같습니다.
이와 관련해서 사전 조사를 하게 되서 관련 글을 정리해 둡니다.


Launching the Pulse for iOS App with a Command




Pulse launcher 는 디바이스 유적 iOS 앱으로 Junos Pulse를 install 했을 때 iOS와 에 register 된 command 입니다. 이 command 는 모든 login parameter 들을 명시할 수 있습니다.



여러분은 웹페이지 내와 외부 앱에서 이 Pulse launcher를 사용할 수 있습니다. 예를 들어 VPN 연결이 필요한 외부앱에서 이 Pulse launcher 를 사용해서 Pulse 를 실행시킬 수 있습니다. 만약 정확한 passcode로 이 앱을 시작시키거나 access 하려고 했다면 Pulse 는 시작 될 것이고 VPN 연결은 유저가 별도로 무엇을 입력할 필요 없이 시작 될 겁니다. 유저가 iOS 디바이스에서 Pulse Secure 의 웹포탈에 로그인을 하면 디폴트 페이지가 뜰 겁니다. iOS 디바이스 유저는 Pulse Secure Access Service Web Portal 로 로그인을 하고 VPN link를 클릭 하면 모바일 사파이에서 Pulse를 실행 시킬 수 있습니다.





Figure 1: iOS Device의 Pulse Secure Access Service Web Portal

모바일 사파리에 있는 VPN link를 tap 합니다. 그러면 Pulse app 이 실행될 겁니다. 만약 iOS 디바이스에 Pulse 가 install 돼 있지 않다면 에러가 뜰 겁니다. 그 다음 단계는 현재의 Pulse 연결 상태와 configuration 에 따라 진행 될 겁니다.


  • Pulse 가 연결상태가 아니라면 현재 세팅된 configuration에 따라 VPN 을 연결할 겁니다.
  • The target URL is already defined and the user just needs to specify a name for the connection. Pulse 가 연결된 상태가 아니고 target Pulse server 에 대한 configuration이 없다면 Pulse 는 Add Configuration 화면을 띄울 겁니다. Target URL 은 이미 정의 돼 있을 겁니다. 유저는 단지 connection 이름을 명시하시면 됩니다.
  • Pulse app 이 이미 Pulse server 에 연결된 상태라면 Pulse app 이 foreground 로 뜰 겁니다.


여러분의 Web Page나 external app에 Pulse launcher 를 employ 하시려면 아래 형식의 format 을 사용해서 링크를 걸어 주세요.

junospulse://<server-host>/<server-path>?method={vpn}&action={start|stop}
&DSID=<dsid-cookie>&SMSESSION=<smsession-cookie>&username=<username>
&password=<password>&realm=<realm>&role=<role>


Usage notes:


  • 만약 유저가 Junos Pulse 앱에 VPN configuration을 생성할 때 username, realm, role을 명시했다면 그 값들이 Web-based login 시 로그인 페이지에 자동으로 표시가 될 겁니다. 로그인 하는 동안 VPN configuration의 field들에 모두 자동적으로 이 값들이 채워졌거나 junospulse:// launch URL 이 채워졌다면 로그인 과정은 유저의 추가적인 input 과정 없이 자동으로 진행 될 겁니다.

  • Pulse app 은 VPN configuration의 password field 에 암호를 저장해 두지 않습니다. Pulse 앱은 iPhone Configuration Utility 나 Junos Pulse Mobile Security Suite 에 의해 인스톨 된 VPN configuration의 password field로 부터 어떤 값을 사용하지 않습니다. Junos Pulse 는 junospulse:// URLs에 명시된 암호만 이용합니다.

  • 유저가 직접 username,realm, role을 로그인하기 위해 입력하면 앱은 이 값들을 VPN configuration에 저장해 둡니다. 그리고 다음번에 이 값으로 자동으로 채워지게 될 겁니다. 유저가 입력한 password 는 VPN configuration에 저장되지 않습니다.

  • realm과 role field는 Apple iOS 4.2 이상의 버전에서 지원됩니다. 만약 Pulse 가 iOS 4.1 에서 실행이 됐다면 realm과 role field들은 Junos Pulse Add/Edit configuration view 에 나타나지 않을 겁니다.


저작자 표시 비영리 동일 조건 변경 허락
신고

CSS color 작업을 보다 편리하게....

2012.11.21 01:23 | Posted by 솔웅


제가 원래 프로그래머라서 웹개발하다가 색상 맞추고 이쁘게 꾸미고 뭐 그런일을 해야 되면 짜증나거든요.


그냥 원하는 기능이 돌아가도록 프로그래밍 하는 것만 하면 좋을 텐데...

하다보면 그렇지 않을 때도 많아요.

더군다나 HTML5, CSS3 로 발전하면서 거의 그래픽 디자이너와 프로그래머의 경계가 더 많이 겹치게 되서 더 그렇죠.


오늘도 그런 작업을 해야 됐는데....


디자이너인 Sandesh 에게 부탁했더니 아래 싸이트에서 CSS gradient 를 간단하게 해서 주더라구요.


http://www.colorzilla.com/




Chrome이나 Firefox에 플러그인으로 설치해서 사용하는 colorpicker, color analyzer 같은 것들이 있구요.


웹에서 곧바로 CSS Gradient 를 만드는 툴이 있네요.

아주 간편하고 좋습니다.





그럼 모두들 즐코딩 바래요.....


저작자 표시 비영리 동일 조건 변경 허락
신고


Tracking Multiple Domains



이 문서는 single profile에 multiple domain에 대한 visits를 수집하는 여러 방법들에 대해 설명하고 있습니다. (그 multiple domain 들이 두 개의 별도 site 에 있지 않고 한개의 site 에 있다고 가정할 때) 그리고 웹사이트의 portion들을 어떻게 track 하는지에 대해서도 다루고 있습니다. 예를 들어 sub-directory 와 iFramed content 같은 경우들을 말하죠. 만약 여러분이 cross-domain tracking 에 대해 잘 모르신다면 저희 Help Center 에 있는 Domains and Directories를 참조하세요.


Introduction


Google Analytics 의 디폴트 setup 은 Single Domain 에 대한 content 와 visitor data를 track 하도록 디자인 돼 있습니다. (예. www.example.com)

그렇지만 만약 여러분이 좀 더 복잡한 상황에서 Analytics를 사용하기를 원하신다면, 예를 들어 


  • Subdomainsdogs.example.com 와 www.example.com 에 방문하는 모든 방문기록. 두 도메인에 대한 정보가 같이 report 되기 원할 때
  • Subdirectories—  오직 www.example.com/dogs 의 subdirectory에 대한 방문만 별도로 report 하기를 원할 때. 만약 한 사이트(single site) 에 있는 경우
  • 3rd-party shopping carts—  온라인 쇼핑몰과 소핑카트 가 서로 다른 도메인에 host 돼 있을 때
  • Top-level domains—  당신이 가지고 있는 두개의 도메인에 대한 모든 visitor들의 정보가 같은 report profile 에 보여지기를 원할 때. 예를 들어www.example-petstore.comwww.my-example-blog.com,
  • IFramed Content— 다른 도메인에 있는 내용이 당신의 웹페이지에서 iFrame 으로 표시될 때. 거기에 대한 visitor와 pageview 데이터를 얻고 싶은 경우



위의 경우에 해당되면 여러분은 정확히 visitor 를 track 하기 위해 tracking code 에 약간의 customization 을 해야 합니다. 이 작업을 하기 전에 디폴트 Analytics installation 에서 Domains and Directories들이 어떻게 다뤄지는지를 먼저 이해하시면 훨씬 도움이 되실 겁니다.



Tracking Scenarios


이 section은 다양한 tracking scenario들에 대해 다룹니다. 가장 많이 사용되는 경우부터 정리했습니다.


Tracking Across Multiple Domains and Sub-domains


이 시나리오는 두개의 unique 한 도메인들과 하나의 sub-domain 을 track 해야 하는 상황입니다. 예를 들어 당신은 온라인 쇼핑몰을 가지고 있고 또한 당신의 블로그에 방문하는 사람도 track 하기를 원합니다.





아래내용은 3개의 example URL 들에 대한 key tracking code customization을 보여줍니다.

  • Online Store Domain: www.example-petstore.com


    당신이 customize 해야하는 유일한 링크나 form data는 www.my-example-blogsite.com 를 point 하는 겁니다. _setDomainName() function이 정의 되었기 때문에 이 사이트의 sub-domain 에 대한 링크는 요구되지 않습니다.
    .example-petstore.com 는 도메인으로서 어떤 subdomain들도 cookie access 가 가능합니다.

  • Online Store Subdomain: dogs.example-petstore.com


    primary domain 으로 link back 하는 부분을 configuration 할 필요는 없습니다 .왜냐하면 sub-domain 이 primary domain 과 같은 cookie 들을 share 하기 때문입니다.

  • Blog Domain: www.my-example-blogsite.com


    이 configuration은 도메인 name을 blog site 에 대한 top-level domain name으로 set 합니다. 이렇게 해서 나중에 당신이 이 블로그 사이트에 어떤 sub-domain들을 추가하게 되면 그 sub-domain 은 그 parent 와 cookie를 share 할 수 있게 됩니다. 당신은 특별히 다른 linked call 을 set up 할 필요가 없는 것이죠. 어쨌든 당신은 www.example-petstore.com에 대한 어떠한 form 이나 link에 대해서 _link()_linkByPost() methods를 사용하셔야 됩니다.


Tracking Across a Domain and Its Subdomains


위에 언급했듯이 Google Analytics의 디폴트 셋업은 single domain 에 대한 content와 visitor 데이터를 track 하기 위해 디자인 됐습니다. (예를 들어 www.example.com 같은 도메인이죠.)  이 의미는 여러분이 그 도메인과 sub-domain 을 관리한다고 면 두개의 도메인에 걸친 visitor data 를 share 하기 위해서는 tracking code를 수정해야 한다는 겁니다.


예를 들어 다음 세개의 도메인들을 .

  • www.example-petstore.com
  • dogs.example-petstore.com
  • cats.example-petstore.com


이를 위해서는 이 세개의 domain 들의 tracking code에 대해 아래와 같은 customization을 해야 합니다.




이 3개의 site들에 대해 링크나 form 에 대해 어떤 adjustment 도 하실 필요가 없습니다. 당신이 도메인 이름을 top-level domain (e.g., example-petstore.com) 으로 세팅했기 때문에 이 3개의 도메인은 모두 같은 쿠키를 공유합니다.


Tracking Between a Domain and a Sub-Directory on Another Domain


흔히 발생할 수 있는 다른 하나의 일반적인 시나리오로는... 서로 다른 도메인에 있는 single domain 과 sub-directory 입니다. 아마 여러분의 웹사이트와 블로그 서비스의 sub-directory로 있는 여러분의 온라인 블로그에 대한 traffic 을 track 하고 싶은 경우 이 시나리오에 해당됩니다. 아래 샘플은 이 두 페이지들에 대한 tracking code를 어떻게 customization 해야 되는지를 보여 줍니다.



Main Website Domain: www.example.com

Blog URL: www.blog-hosting-service.com/myBlog


www.example-petstore.com 에서 shopping cart 웹사이트로 가는 form submission에 대해서는 _linkByPost() method 를 사용해서 shopping cart site 로 가는 HTTP POST 를 거쳐 방문자의 쿠키 데이터와 traffic을 받습니다. _setAllowLinker() method 는 target site를 가리키는데요, 일반적인 유저 세션 정보가 아닌 POST 데이터로 부터 쿠키 정보를 읽는데 사용됩니다. 이런식으로 하나의 도메인에서 다른 도메인으로 쿠키 데이터를 pass 할 수 있습니다. 그러면 여러분의 온라인 쇼핑몰에서 쇼핑카트로 가는 방문자의 세션을 그대로 유지할 수 있습니다.

이와 비슷하게 온라인 쇼핑몰에서 쇼핑카트로 가는 어떤 links 들에 대해서 visitor data를 transfer 하려면 _link() function을 사용하시면 됩니다.



Tracking Across iFrames


도메인들가의 transfer 가 있는 SIte 안에서 domain들이 새 윈도우에서 열리거나 iFrame으로 content 를 보여줄 수 있습니다. 이럴 경우 한 도메인에서 다른 도메인으로방문자와 campaign 쿠키를 transfer 하기 위해 _getLinkerUrl() method 를 사용할 수 있습니다. 예를 들어 여러분 페이지에 iFrame 이 있는데 여기에 www.my-example-iframecontent 에 호스트된 content 가 display 된다고 합시다. www.example-parent.com 에 있는 iFrame 의 parent page 로부터 방문자 정보를 transfer 하기 위해 iFrame 을 로드하는 Javascript 를 사용하고 쿠키안에 있는 정보를 _getLinkerURL() method 를 사용해서 pass 합니다.


다음 예제는 linking function 에 대해서만 다루는데요  cross-domain tracking이 두 도메인에 대해 tracking 정보 일부를 다루도록 configure 된 경우입니다.



Configuring iFrame Tracking for Internet Explorer

parent page 바깥의 다른 도메인에 있는 iFrame content 는 third-party content로 취급됩니다. Internet Explorer 6 이상의 버전에서의 디폴트는 first-party site에 third-party 웹사이트에 대해 first-party site에 쿠키를 저장하지 못하도록 합니다. 

이렇게 되면 iFrame된 페이지에 대해 Analytics tracking 을 하려면 Internet Explorer 에 대해서 별도로 특별한 configuration 을 해야 합니다. iFrame 에 있는 웹페이지에 대해 여러분은 privacy preferences configuration 을 해야 합니다. 아래 방법들 중 한가지를 사용해서 hosted page들에 대해 privacy preferences 를 셋업실 수 있습니다.

  • 포함된 site의 페이지에 대해 특별히 "Platform for Privacy Preferences" (P3P) HTTP header를 include 한다.
  • 포함된 site의 페이지에 대해 P3P XML manifest 를 제공한다.


좀 더 자세한 정보를 원하시면 아래 자료들을 참조하세요.


Tracking a Single Subdirectory


큰 도메인의 single sub-directory 에 대해 Analytics tracking 을 제한해야하는 경우도 있습니다. 두 가지 일반적인 상황을 예로 들어 보면요.

  • 오직 sub-directory 로만 access 합니다. 예를 들어 ecommerce hosting service 를 사용하는 경우가 되겠습니다.
  • sub-directory에 대해 제한적으로 tracking 하기를 원합니다. 예를 들어  Analytics tracking을 사용하는 회사 웹사이트에 project 를 launch 했을 경우죠.


블로그 서비스를 제공하는 큰 website host 의 일부분에 여러분의 블록가 있고 여기서 방문자 정보를 track 하는 Analytics account 에 대한 profile 이 있다고 가정합니다. 여러분의 사이트는 www.example.com/myBlog/ 같은 주소를 갖습니다. 다른 블로그들은 여러분의 블로그와 별도의 싸이트 입니다. 이 경우 그 블로그페이지와 그 sub-directory 에만 해당 정보를 필요로 하겠죠. 여러분 블로그에 대한 정보만 tracking 하도록 셋업하려면 여러분의 tracking code에 _setCookiePath() function 을 사용해야 합니다.


이렇게 한번 셋업 되면 오직 sub-directory 에 대한 visitor와 campaign 데이터만 display 될 것입니다. 그 이유는 쿠키 경로 때문인데요. 이 쿠키경로가 www.example.com 의 root directory 가 아닌 sub-directory로 세팅 됐기 때문이죠. 이렇게 되면 당신의 프로파일은 당신 쇼핑몰에 대해서만 유니크하게 쿠키를 셋업 할 것입니다.


이 시나리오에서는  _setCookiePath() function을 사용하는 것이 가장 좋은 방법인것 같습니다. 이렇게 하지 않으면 여러분 레포트에는 다음의 두가지 영향이 끼칠 겁니다.


  • Other Analytics account cookies set on www.example.com can be shared by your account.


    new 와 returning 같은 visitor statistics 들의 방문 시각과 방문 횟수가 다르게 나올 겁니다. 그리고 여러분의 방문자 세션 쿠키들도 www.example.com 의 다른 쇼핑몰에 영향을 줄 수 있습니다.

  • Your reports might reflect campaign details from another part of the site.


    예를 들어 방문자가 같은 도메인의 다른 사이트(www.example.com/theirBlog) 로 가는 email campaign 을 클릭했다고 합시다. 이 경우 방문자 쿠키의 referral 정보는 Latest News on Blogging이라는 이름의 campaign 으로 세팅 될 겁니다. 나중에 같은 방문자가 구글에서 검색을 해서 여러분 사이트를 구글에서 클릭을 하고 여러분 블로그의 어떤 물건을 구매했습니다. 검색 결과에 ad 와 email campaign 정보가 계속 붙게 될 겁니다. 이럴 경우 그 구매한 상품에 대해서는  Latest News on Blogging campaign 이 그 구매를 이끌었다고 기록 될 겁니다. 왜냐하면 여러분 온라인 쇼핑몰의 _utmz cookie 가 여러분 쇼핑몰 경로로 unique 하게 관리되지 않기 때문입니다.

여러분 쇼핑몰의 경로에만 방문자 쿠키를 제한하면 www.example.com 의 다른 곳에 있는 다른 쇼핑몰에 대한 캠페인과 세션은 여러분의 report 에 포함되지 않을 겁니다.

(웹브라우저와 쿠키에 대해 좀 더 알고 싶으시면 Cookies 를 참조하세요.)


Other Subdirectory Tips

  • 만약 여러분이 sub-directory 에 대한 visitor와 referral traffic 을 tracking 한다면 오직 그 sub-directory 에 대한 content 에 대해서만 적용 되도록 그 sub-directory 를 Include filter 에 셋업 하시고 싶을 겁니다. 좀 더 자세한 사항에 대해서는  pre-defined filter article 을 참조하세요.

  • 만약 여러분의 도메인에 sub-directory tracking 을 셋업하려면 Analytics tracking 이 root path (e.g. /)와 이 아래의 페이지들  에 대해 disabled 돼 있어야 합니다.  예를 들어 www.example.com/index.html 은 Analytics tracking 이 적용되지 않아야 합니다. (여러분이 subdirectory들을 별도로 track 하기를 원하는 경우). 만약 root path 에 대한 tracking 이 disable 되지 않았다면 한 페이지에 대해 두 종류의 쿠키가 세팅 될 겁니다. 하나는 subdirectory 이고 또 다른 하나는 top-level 도메인이 되겠죠.

Tracking Across Two Sub-directories on the Same Domain


한 도메인에 있는 여러개의 subdirectory 들을 track 하고 싶을 때도 있을 겁니다. 그리고 그 상위에 있는 (larger domain)에는 접근할 수 없는 경우입니다. 예를 들어 두개의 온라인 쇼핑몰과 쇼핑카트를 아래와 같이 가지고 있을 수 있습니다.

  • www.example-commerce-host.com/myStore/
  • www.example-commerce-host.com/myCart/




쇼핑몰에서 쇼핑카트로 가는 유저 세션과 campaign data를 track 하고 싶다면 이를 위해서는 두가지 방법을 사용해야 합니다.



아래 예제에서 쇼핑몰에서 쇼핑카트로 가는 유저 세션과 캠페인 데이터에 대한 track 을 할 수 있는 방법을 보여 줄 겁니다.


이 경우 유니크한 쿠키가 해당 도메인에 대해 세팅 될 겁니다. 제공된 첫번째 디렉토리에 대한 접근시 쿠키가 만들어 질 것이고 같은 쿠키 데이터가 두번째 디렉토리로 copy 될 겁니다. 왜냐하면 두개의 사이트 모두 같은 도메인에 있기 때문이죠. 이 두개의 디렉토리 간에 어떤 링크나 form data 와 관련해서 작업하실 필요가 없습니다.


Key Components to Cross-Domain Tracking


This section will help you troubleshoot your cross-domain tracking setup by providing detailed information on the key components and how best to use them.
이 섹션에서는 여러분의 cross-domain tracking setup 에 대하 troubleshoot 하는 것을 도와 줄 겁니다. 

Profiles

cross-domain tracking을 셋업 할 때 여러분의 프로파일에 아래 사항들을 제대로 수행했는지 한번 더 확인하세요.

  • Set up a master profile for your primary domain without filters.

    cross-domain tracking 을 하기 위해 우선 primary domain 에 대해 master profile 을 셋업할 것을 권고 합니다. 이 프로파일은 filter 없이 생성하세요. 이렇게 하면 primary domain에 대한 기본적인 historical data를 확보할 수 있습니다. 그래야지 여러분이 cross-tracking profile을 셋업하고 나서 에러가 있는지 없는지 확인할 수 있겠죠.


  • Create a profile especially for cross-domain tracking and re-use your tracking code.

    프로파일을 셋업하고 primary domain 에 대한 트래킹 코드를 retrieve 하고  난 후  다른 모든 웹 프로퍼티들에 대해 같은 트래킹 코드를 사용하세요. 이렇게 하면 configuration에 제대로 셋업 될 겁니다. 그리고 그렇게 하면 모든 웹 프로퍼티들에 대한 historical data 도 가질 수 있게 됩니다. master profile 에 대해 위에서 권고한 셋업을 했다면 마스터 프로파일에 있는 같은 트래킹코드를 사용해서 promary domain 에 대한 프로파일을 추가하는 것은 간단한 일입니다. 여러분이 lint 하기를 원하는 다른 모든 웹 프로퍼티들도 모두 같은 트래킹코드를 가지고 있어야 합니다.


  • Modify your cross-domain profile with a filter to show the full domain in your content reports.


    domain linking established 가 되고 나면 content reports 에 오직 URI request 만 보게 될 겁니다. 그리고 top-level 이나 sub-domain에 대한 request 는 안 보이죠. 예를 들어 다음 페이지들에 대한 visits 에 대해 알아보죠.

    http://www.example.com/index.php and another page on
    http://sub.example.com/more.php

    이 경우 report 는 아래와 같이 보여질 겁니다.

    — index.php
    — more.php


    어떤 페이지가 어떤 도메인에 속해 있는지 구분할 수 가 없죠. 페이지 report 에 domain 을 보이도록 하기 위해서는 page URL의 모든 components를 포함하는 filter를 세팅해 주세요.

    1. In the Profile Settings page, click the Add Filter link.
    2. Choose Add New Filter and provide the filter a name.
    3. Choose Custom Filter and select Advanced on the Filter type settings.
    4. Under Advanced settings:
      1. FieldA should be set to Hostname
      2. FieldB should be set to Request URI
    5. Set the values for both Field A and Field B to (.*), which is an expression that captures all characters.
    6. Set the Output To --> Constructor option to Request URI and provide $A1$B1 as the value for that choice.

    Your reports will now show:

    www.example.com/index.php
    sub.example.com/more.php

Cookies: Necessary to Transferring Visitor Data



두개의 도메인이 같은 visitor data(세션과 visitor type)를 공유하기 위해서는 같은 쿠키 정보를 copy 하거나 share 할 수 있어야 합니다. 그리고 아래 내용을 기억해 두세요.



A session from one domain can only be transferred to another domain via a properly configured click or form submission, or via _getLinkerURL.



이 3개의 methods를 통해 하는 쿠키 데이터 pass 는 single session 하의 두개의 페이지 뷰를 연결합니다. 즐겨찾기같은 것을 이용해서 만약에 유저가 두개의 사이트를 별도로 visit 한다면 (같은 프로파일을 tracking 하는 경우),  이 visits는 separate session으로 간주 될 겁니다. 이 시나리오에서는 linking methods 가 invoke 되지 않습니다. 그러므로 해당 유저에 대해 initiating session 을 할 방법이 없습니다.


cross-domain tracking을 제대로 이해하려면 쿠키가 여러 필드들에 의해 identified 되고 디폴트로 도메인들간에 share 하지 않는 다는 것을 잘 이해하면 도움이 될 겁니다.

디폴트로 cookie sharing 은 Analytics에서 자동으로 turn off 됩니다. 왜냐하면 많은 경우 도메인들강에 같은 쿠키를 sharing 하는 것은 바람직하지 않기 때문이죠. 

Cookie Reference에 있는 Significance of Cookie Identification and Expiration를 보세요. 또한 Analytics는 디폴트로 쿠키에 대한 integrity check를 추가합니다.


_setDomainName('yourDomainName')

What it does.
This method sets the domain field of the cookie to the string provided in the parameter. With this method, you can control the domain name used by the cookie. You will ONLY have to set up linking between top-level domains because sub-domains will share the same cookies with their parents.
When to use it.
Use this when you want to treat top- and sub-domains as one entity and track in the same profile. Also use this when you want to track across multiple top-level domains AND their sub-domains. In this case, you will need to using linking between the top-level domains, but not between the top-level domains and their sub-domains.
When not to use it.
If you are tracking a single domain, you do not need to explicitly set the domain name.



========= o ========== o ======== o ========


저의 경우에는 

www.example.com/except1

www.example.com/except2

www.example.com/except3

www.example.com/except4


이 중에 except1 만 별도로 관리하고 나머지는 다 같이 관리해야 하는데...


여기에 맞는 시나리오는 못 찾겠네요.


다시 한번 자세히 보고 방법을 찾아봐야겠네요....

저작자 표시 비영리 동일 조건 변경 허락
신고


스마트폰이 나오고 모바일 앱을 개발 할 일이 많아지고 그래서 HTML 5 나 CSS3 같은 기술을 사용할 기회가 많아지고 있습니다.

자바스크립트도 그렇지만 이 HTML5 나 CSS3 도 기능에 따라 지원하는 브라우저도 있고 또 그렇지 않은 브라우저도 있습니다.


요즘 저는 회사 내부 모바일 앱쪽으로 주로 일을 하고 있는데요.

회사 구성원이 쓰는 디바이스가 대부분 블랙베리 입니다.


그러다 보니까 기능을 지원하는 디바이스도 있고 또 그렇지 않은 디바이스도 있고 그러네요.


정말 웹 개발하기가 엄청 복잡해 졌습니다.


요즘 테스트 작업 하다가 찾은 싸이트 인데요.

이 기능이 왜 이 디바이스나 브라우저에서 제대로 작동하지 않는지 설명할 때 유용하더라구요.


싸이트 주소는 http://caniuse.com/ 입니다.


가 보면 CSS, HTML5, SVG, Java Script 의 기능별로 지원되는 브라우저 및 디바이스가 잘 정리 돼 있습니다.





개발하시거나 테스트 하실 때 활용하세요.

저작자 표시 비영리 동일 조건 변경 허락
신고

JSON 파일 만드는데 도움 주는 툴

2012.08.20 21:00 | Posted by 솔웅


jQuery Mobile로 웹앱을 만들다 보니 JSON 파일을 많이 다룰 것 같습니다.


그래서 샘플로 Mockup wireframe 만들다 보니까 JSON 파일을 사용하는 샘플 앱을 만들었습니다.


현업들로부터 엑셀 파일로 데이터를 전달 받는데요.

이걸 JSON 파일로 쉽게 만드는 방법이 뭘까 찾아보다가 이 작업을 도와주는 싸이트를 찾았습니다.


Mr. Data Converter


이 싸이트는 엑셀파일에서 그냥 Copy 하거나 CSV에서 데이터를 Copy 한 후에 아래 select menu에서 원하는 파일 형식을 고르시면 됩니다.




Christopher Parker의 CSV to json




이 싸이트는 CSV를 JSON 형식으로 바꿔줍니다.




모두 자바스크립트로 이뤄졌는데요.

위쪽 오른쪽의 View Source를 누르시면 원본 파일도 보실 수 있습니다.


따로 로컬에 복사해서 사용하실수도 있구요.



cvsToJson.html


저작자 표시 비영리 동일 조건 변경 허락
신고

iOS 웹클립에 관한 팁

2012.06.25 21:51 | Posted by 솔웅


매니저인 Patrick이 휴가 가면서 웹사이트 링크를 메일로 보내주고 같습니다.
거기에는 iOS에서 사용되는 WebClip 에 대한 소개글이 있더라구요.

imore.com이라는 사이트인데 여러가지 개발 관련 팁 정보가 많이 있는 곳 같아요.


WebClip에 대한 내용은 이미 알고 있었지만 이렇게 따로 정리 해 두면 나중에 좀 더 도움이 될 수 있을 것 같아서 정리해 두기로 했어요.


그리고 외국 동료들이 알려주는 웹 싸이트는 네이버등 한국 검색엔진을 통해서 얻어지는 정보 이외에 추가적으로 정보를 얻을 수 있는 source가 될 수 있더라구요.


좀 더 풍부한 정보 소스를 확보 할 수 있는 잇점이 있어요.

(이 글을 읽는 분들에게도 도움이 되시길 바래요)


============== o ======= o =========


Ninja tip: How to create a custom iPhone/iPad home screen icon for your website

By , Friday, Nov 26, 2010 at 2:54 pm





Add to Homescreen 을 눌렀을 때 iPhone, iPod touch, iPad 에 웹사이트의 아이콘이 만들어서 보여지는데 관심 있으세요? 방문자들이 당신의 웹 사이트의 WebClip을 그들의 홈 스크린에 추가해서 볼 수가 있습니다. 그들은 그것을 친구들한테 보여 주겠죠? 그 친구들도 홈스크린에 웹 클릭을 추가할거고 여러분의 웹사이트는 구글 Page ranks에서 보여질 겁니다.

올해에 애플이 아이패드와 새로운 Retina Display 해상도를 선보였죠? 그러면 여러분은 더 큰 사이즈의 아이콘을 준비하셔야 할 겁니다.

• 120X120 사이즈의 아이콘이 iPad와 아이폰 4에 알맞는 아이콘 이미지 크기 입니다. 이 크기의 아이콘을 만드세요.
• 테두리에 둥근 처리 하는 것은 걱정하지 마세요. 애플이 자동적으로 해 줄겁니다. 그리고 손톱 모양의 shiny 효과도 자동적으로 해 줄거구요.


아이콘은 아래처럼 될 겁니다.



•  근사한 아이콘을 만들고 난 후 이것의 이름을 apple-touch-icon.png 로 명명하세요.
•  이제 이것을 여러분 웹사이트의 root 디렉토리에 업로드 하세요. 아마 아래와 같이 경로가 되겠죠.
http://www.yoursite.com/apple-touch-icon.png


이제 됐습니다. 아주 쉽죠?

이제 방문자가 아이폰이나 아이팟 터치 혹은 아이패드로 여러분의 사이트를 보다가 action 버튼(iOS 4.2 이하의 버전에서는  the "+" button 임)을 누르고 Add to Home Screen을 선택하게 될 겁니다. 그러면 방문자의 앱 목록에 여러분 사이트의 웹클립이 생성되겠죠. 이제 그 웹클립 아이콘만 누르면 한번에 여러분 사이트를 방문할 수 있습니다. 그러면 여러분 사이트는 더 많은 방문자를 기록하겠죠. 이 간단하고 소박한 기능을 절대 평가 절하하지 마세요. 





Bonus tip : 여러분 사이트에 custom icon을 생성하지 않으면 애플은 그 사이트의 페이지에 대한 screenshot으로 아이콘을 만들겁니다. 그 페이지는 Add to Home Screen을 할 때 오픈했던 페이지가 될겁니다.

UPDATE: Update : Marc EdwardsCampaign Monitor 에서 Jesse Dodd's article의 아티클에대해 다음단계로 웹 아이콘을 어떻게 생성하는지에 대해 알려 주었습니다.



나는 각 iOS 기계들의 해상도에 맞게 3개의 아이콘 이미지를 만들었습니다. iPhone 3G/3GS 에 대해서는 163dip를 iPad에 대해서는 132dpi를 그리고 iPhone4에 대해서는 326dpi 이미지를 만들었습니다.

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/link/to/iOS-57px.png" />
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/link/to/iOS-72px.png" />
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/link/to/iOS-114px.png" />


위의 코드를 보시면 제가 apple-touch-icon-precomposed를 사용하신 것을 보실 수 있으실 거예요. -precomposed를 붙이면 iOS에서 자동적으로 만들어 지는 손톱모양의 shiny 효과와 코너 round 효과를 보여주지 않도록 할 겁니다. 만약 이 효과를 적용하고 싶으시면 이 부분을 빼면 됩니다. 그러면 여러분은 그냥 평면 이미지만 제공해도 iOS에서 자동적으로 처리를 해 주겠죠. 여러분이 직접 효과를 넣어서 더 예쁘게 하고 싶으시면 -precomposed 부분을 넣으시면 되구요.


더 자세한 것을 알고 싶으시면 전체 아티클을 읽어 보세요.

이제 방법을 아셨나요? 질문이 있으시면 댓글로 남겨 주세요. 만약 여러분 사이트에 훌륭한 새 아이콘이 생겼다면 저희에게 알려 주세요. 저희도 체크해 보게요.

Tips of the day 코너는 초보자부터 숙련자까지의 개발자들에게 도움이 되는 내용을 전해 드립니다. 이 팁을 이미 알고 계셨더면 다른 친구들에게 도움이 될 수 있도록 링크를 알려 주세요. 만약에 여러분만의 팁이 있으시다면 댓글로 알려주시거나 dailytips@tipb.com 으로 내용을 보내 주세요. (아주 훌륭하고 이전에 알려지지 않은 팁이라면 상품을 드립니다.)



저작자 표시 비영리 동일 조건 변경 허락
신고



Data Architect









Data Modeling Architect











저작자 표시 비영리 동일 조건 변경 허락
신고

Responsive WEB (반응형 웹) 맛보기

2012.06.13 21:09 | Posted by 솔웅


요즘 브라우저 크기를 줄이면 화면 레이아웃이 갑자기 바뀌는 웹사이트를 가끔 봅니다.

Responsive WEB 개념을 이용해서 만든건데요.


요즘 웹페이지를 표시하는 디바이스들이 많이 늘어나다 보니까 하나의 웹페이지를 데스크 탑, 모바일 폰, 타블렛 PC 등 다른 해상도의 디바이스들에 맞는 레이아웃을 각각 만들 필요가 있어 졌습니다.


이 Responsive WEB은 HTML5이 Media Queries 를 이용하여 하나의 소스로 제작된 컨텐츠로 여러 해상도의 화면을 제공할 수 있도록 만드는 개념입니다.


대표적으로 Boston Globe 가 있는데요.






1. A flexible, grid-based layout : 그리드를 상대적(% 단위 등)으로 지정하여 브라우저 크기에 따라 유동적으로 변환
2. Flexible width media: images, video : 너비가 변경되어도 웹페이지 안의 미디어가 넘치지 않게 하는 기법
3. Media queries : 다양한 브라우저에서 표현양식을 제어할 수 있게 고안된 기능


Responsive WEB에는 이 세가지 개념이 기본적으로 깔려 있습니다.


그런데 이 반응형 웹은 IE8 미만에서는 사용할 수 없다고 합니다.


오늘 제 immediate manager 인 Rajesh 가 Boston Globe를 보여주면서 이거 어떻게 하는지 아냐고 물어보더라구요.


예전에 이 Responsive WEB 소스코드로 한번 연습한 적이 있어서 대충 알려 줬는데요.

많이 까먹어서 제대로 알려주지 못한 것 같네요.


생각난 김에 다시 소스로 정리를 해 두려고 합니다.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<title></title>
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)" >
<link href="desktop_pc.css" rel="stylesheet" type="text/css" media="screen and (min-width:800px)" >
</head>

<body>
    <h1>Simple one</h1>
    <div id="pc_view">
        <h2>Desk Top PC </h2>
        <p>Make this browser narrow then 800 px.  브라우저의 너비를 800 px보다 작게 줄여보세요. </p>
        <p>You can see Black background and White text. 배경이 검정색에 글자가 흰색으로 바뀔 겁니다. </p>
    </div>
    <div id="mobile_view">
        <h2>Mobile</h2>
        <p>Make it wider then 800px. 브라우저의 너비를 800 px이상으로 크게 늘여보세요. </p>
        <p>White BG and Black Text. 배경이 흰색에 글자가 검정색으로 바뀔 겁니다. </p>
    </div>   
</body>
</html>


이게 제일 간단한 소스인데요.

우선 보시면 HTML5를 지정했구요. Charset 을 utf-8으로 하는 메타태그가 하나 있습니다.

그리고 뷰포트 메타태그가 있습니다. width=device-width 로 해서 화면을 사용자 디바이스 width 에 맞춰서 display 되도록 한 겁니다.

이 viewport 관련해서도 별도의 글에서 정리해 둬야겠네요.

그리고 그 다음이 css 파일인데요.

799픽셀 이하짜리와 800픽셀 이상짜리 두개를 따로 마련했습니다.

그리고 태그 안에 media query 가 있습니다. 이 부분에서 해상도에 맞게 css 파일을 불러 오는 겁니다.


그 다음에는 두개의 div 가 있는데 하나는 id가 pc_view 이고 다른 하나는 mobile_view 입니다.

이 id를 가지고 css에서는 어떻게 사용하는지 보죠.


우선 desktop_pc.css 파일 입니다.


@charset "utf-8";
body {
    background-color: #fff; /* 배경 색상을 흰색 */
}
#mobile_view {
    display : none; /* mobile_view선택자 영역은&nbsp;화면에서 생략 */
}



보시면 여기서는 mobile_view 의 display 를 none으로 했죠?

그러면 pc_view 만 나오게 됩니다.


그럼 mobile.css를 보실까요?

@charset "utf-8";
body {
    color: #FFF; /* 글자 색상을 흰색 */
    background-color: #000; /* 배경 색상을 검정 */
}
#pc_view {
    display : none; /* pc_view 영역은 화면에서 생략 */
}



역시 pc_view 의 display를 none으로 했습니다.


개념만 이해하기 위해 아주 간단한 예제를 살펴 봤습니다.



저작자 표시 비영리 동일 조건 변경 허락
신고

User Agent Switcher 소개

2012.06.12 10:19 | Posted by 솔웅


모바일 웹을 개발하다 보면 각 디바이스 별로 기능을 다르게 주는 경우가 있습니다.

아이폰 인경우는 어떤 기능을 실행하고 또 안드로이드인 경우는 다른 기능을 실행하고 등등이요.


그런데 전화기를 다 가지고 있지 못하면 이 기능을 제대로 테스트하지 못하기도 합니다.


이럴 경우 user agent 를 바꿔서 데스크탑이나 랩탑에서도 모바일 디바이스에서 해야만 하는 테스트를 할 수가 있습니다.


각 브라우저에 맞는 User Agent Switcher 플러그인을 설치하시면 되는데요.


우선 크롬부터 알아 보겠습니다.


1. 크롬 user agent switer

https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg


 우선 크롬 브라우저를 실행시킨 후에 위 링크로 접속을 합니다.

다음에 오른쪽 위에 있는 Added to chrome 버튼을 클릭하시면 됩니다.

간단하죠?

그러면 오른쪽 위에 저런 아이콘이 생기는데요. 이 아이콘을 누르고 원하는 디바이스를 선택하시면 됩니다.


그럼 위와 같이 제 랩탑에 있는 크롬 브라우저인데 Platform 이 iphone으로 잡히고 User Agent에도 iPhone으로 잡힙니다.


2. 파이어폭스 user agent switer

http://chrispederick.com/work/user-agent-switcher/



파이어폭스에서도 마찬가지로 이 링크로 가셔서 설치하시면 됩니다.

그리고 메뉴에서 tools - Default User Agent를 선택하셔서 사용하세요.


그러면 아까와 마찬가지로 랩탑에 있는 파이어폭스 브라우저인데도 아이폰으로 인식합니다.


그리고 또 다른 파이어폭스용 User Agent Switcher 인것 같은데요.

https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/


여기로 가셔서 받으셔도 됩니다.
저는 저 위에걸로 깔아서 쓰고 있습니다.


모바일 웹 개발하시는데 도움이 되시길 바랍니다.


저작자 표시 비영리 동일 조건 변경 허락
신고
이전 1 2 다음

티스토리 툴바