/*
 * Copyright (c) 2024 LINE Corporation. All rights reserved.
 * LINE Corporation PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
 */

const SUPPORT_LANGUAGES = ["ko", "ja", "en", "zh", "th"];
const FALLBACK_LANGUAGE = "en";

const browserLanguage = navigator.language || navigator.userLanguage || "en";
const userLang = browserLanguage.split("-")[0];
const siteLang = window.location.pathname.split("_").pop();

const isNeedRedirect = window.location.pathname.indexOf("_") !== -1;
const isLineCorpUrl = window.location.origin.endsWith("linecorp.com");

if (!isLineCorpUrl && isNeedRedirect && siteLang !== userLang) {
  const SITE_PREFIX = window.location.pathname.split("_").shift() + "_";
  let lang = FALLBACK_LANGUAGE
  if (SUPPORT_LANGUAGES.indexOf(userLang) !== -1) {
    lang = userLang
  }
  if (lang !== siteLang) {
    window.location.href = SITE_PREFIX + lang + window.location.search;
  }
}


Redirect Code

/*
 * Copyright (c) 2024 LINE Corporation. All rights reserved.
 * LINE Corporation PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
 */

/**
 * Insert this script into https://landpress-studio.linecorp.com/projects/772/setting/commoncode
 */

const currentUrl = new URL(window.location)
const originalEncodedParams = currentUrl.searchParams.get('liff.state')
let bypassParams = null
if (originalEncodedParams) {
  bypassParams = {}
  const originalParams = new URLSearchParams(decodeURIComponent(originalEncodedParams))
  originalParams.forEach((value, key) => {
    if (key.startsWith('utm_')) {
      bypassParams[key] = value
    } else if (key.startsWith('bypass_')) {
      bypassParams[key.substring(7)] = value
    }
  })
}

/**
 * @param {string} [s] a suffix text to be added into content of anchor
 */
const adjustAnchors = (s) => {
  const bypassAnchors = [
    // button section
    ...document.querySelectorAll('section[id^="bypassSection_"] > div > div > div > a'),
    ...document.querySelectorAll('div[id^="bypassSection_"] > div > div > div > a'),
    // image card section
    ...document.querySelectorAll('section[id^="bypassSection_"] > div > div > div > div > div > div > a'),
    ...document.querySelectorAll('div[id^="bypassSection_"] > div > div > div > div > div > div > a'),
  ]
  bypassAnchors.forEach(anchor => {
    let href = anchor.getAttribute('href')
    if (!href || !bypassParams) {
      console.warn('There is no href or bypass params')
      return
    }
    // cache the origin href into 'data-href' attribute
    if (anchor.dataset.href) {
      href = anchor.dataset.href
    } else {
      anchor.dataset.href = href
    }
    console.log(`Adjusting anchor with params ${JSON.stringify(bypassParams)} and suffix ${s}...`)
    const url = new URL(href)
    if (url.hostname === 'profilestudio.line.me') {
      let liffState = url.searchParams.get('liff.state') || ''
      const liffStateParams = new URLSearchParams(decodeURIComponent(liffState))
      for (const key in bypassParams) {
        liffStateParams.set(key.startsWith('utm_') ? key : `bypass_${key}`, bypassParams[key])
      }
      liffState = liffStateParams.toString()
      url.searchParams.set('liff.state', liffState)
    } else if (url.hostname === 'liff.line-beta.me' || url.hostname === 'liff.line.me') {
      for (const key in bypassParams) {
        url.searchParams.set(key.startsWith('utm_') ? key : `bypass_${key}`, bypassParams[key])
      }
    } else {
      for (const key in bypassParams) {
        url.searchParams.set(key, bypassParams[key])
      }
    }
    anchor.setAttribute('href', url.toString())
    s && (anchor.children[0].innerHTML += ` (${s})`)
  })
}

document.addEventListener('readystatechange', () => {
  console.info(`document > ${document.readyState}`)
  adjustAnchors()
})

document.addEventListener('DOMContentLoaded', () => {
  console.info('DOM loaded')
  adjustAnchors()
})

window.addEventListener('load', () => {
  console.info('window > onload')
  adjustAnchors()
})


to bypass `bypass_*` & `utm_*` query parameters from URL to pre-defined buttons inside LIFF page

Bypass query params to buttons

/*
 * Copyright (c) 2024 LINE Corporation. All rights reserved.
 * LINE Corporation PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
 */

/**
 * Ref:
 *  https://wiki.workers-hub.com/display/UTSDEPT/UTS+Log+design+general+guide
 *  https://git.linecorp.com/UTS/uts-sdk-js#usage
 */

const utsId = 'line_user_profile'
const applicationName = 'Profile Studio'
let env = 'release'
let utsEndpoint = ''

const pathname = window.location.pathname
if (pathname.startsWith('/beta-')) {
  env = 'beta'
}

/** @type {HTMLMetaElement | null} */
const utsEnvMeta = document.querySelector('meta[name="uts:env"]')
if (utsEnvMeta) {
  env = utsEnvMeta.content
}

switch (env) {
  case 'beta':
    utsEndpoint = 'https://uts-front.line-apps-beta.com'
    break
  case 'release':
    utsEndpoint = 'https://uts-front.line-apps.com'
    break
  default:
    throw `Not support UTS env [${env}] yet`
}

const injectUts = () => {
  if (document.querySelector('script#uts') || !document.body) {
    return
  }

  const script = document.createElement('script')
  script.id = 'uts'
  script.src = 'https://static.line-scdn.net/uts/edge/stable/uts.js'
  script.dataset.nscript = 'afterInteractive'

  document.body.append(script)
  script.onload = () => {
    console.info('Loaded UTS script, initializing UTS...')

    window.uts.init({
        utsId,
        appName: applicationName,
        appEnv: env,
      }, {
        endpoint: utsEndpoint
      }
    )

    /** @type {HTMLMetaElement | null} */
    const utsScreenNameMeta = document.querySelector('meta[name="uts:screen_name"]')
    const screenName = utsScreenNameMeta ? utsScreenNameMeta.content : pathname
    console.info(`Sending 'pageview' event with screen name = [${screenName}]`)
    window.uts.sendPageview({screenName})
  }

  console.info('Appended UTS script')
}

const trackAnchorClickEvent = () => {
  const anchors = document.querySelectorAll('a')
  anchors.forEach(anchor => {
    if (anchor.dataset.utsClick) {
      return
    }

    anchor.addEventListener('click', (e) => {
      /** @type {HTMLAnchorElement} */
      const target = e.target || e.currentTarget
      const hrefAttr = target.getAttribute('href')
      const hrefData = target.dataset.href
      window.uts.sendClick({params: {href: hrefData || hrefAttr}}, undefined, () => {
        console.info(`Sent 'click' event with href = [${hrefData || hrefAttr}]`)
        window.location.href = hrefAttr
      })
      e.preventDefault()
      e.stopPropagation()
      return false
    })

    anchor.dataset.utsClick = 'true'
    console.info(`Tracked 'click' event of anchor with href = ${anchor.getAttribute('href')}`)
  })
}

document.addEventListener('readystatechange', () => {
  injectUts()
  if (document.readyState === 'complete') {
    trackAnchorClickEvent()
  }
})

document.addEventListener('DOMContentLoaded', () => {
  injectUts()
  trackAnchorClickEvent()
})

window.addEventListener('load', () => {
  injectUts()
  trackAnchorClickEvent()
})


プロフィールスタジオとは？

AIセルフィー

AIポートレート

AIベイビー

AIティーン

みなさんも一緒に当ててみませんか？！

Q: プロフィールスタジオの4つのアイテム中、一番人気のアイテムは？

では、
結果画像を活用した遊び方を一緒にチェック！

LINEプロフィールスタジオを
もっと楽しめる方法！

みなさんも今すぐ魅力的だと思ったアイテムをクリックして画像を生成してみませんか？！