app/template/user_data/gibier_lp.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}
  4. <script>
  5.     var headerContent = document.getElementById("header_content");
  6.     var footerCtaBtn = document.getElementById("footer-cta-btn");
  7.     var floatingCta = document.getElementById("float-cta-btn");
  9.     const url = new URL(window.location.href);
  11.     const params = url.searchParams;
  13.     const inoshihsi_url = params.get('channel') === "ec" ? 
  14.         "https://web-order.shikomel.com/entry/before?sendto=detail&param=710" : "https://shikomel.onelink.me/5Bi4/3luki5pa"; 
  15.     const inoshishi_cta = document.getElementById("inoshishi-cta")
  16.     inoshishi_cta.href = inoshihsi_url
  17.     
  18.     const shika_url = params.get('channel') === "ec" ? 
  19.         "https://web-order.shikomel.com/entry/before?sendto=detail&param=711" : "https://shikomel.onelink.me/5Bi4/eizd0t47";
  20.     const shika_cta = document.getElementById("shika-cta")
  21.     shika_cta.href = shika_url
  22.     
  23.     {% set current_domain = app.request.getHost() %}
  25.     {# ドメイン判定 #}
  26.     {% set is_prod = 'web-order.shikomel.com' in current_domain %}
  27.     {% set is_stg = 'web-order-stg.shikomel.com' in current_domain %}
  29.     {% if is_prod %}
  31.     // CTAボタンクリック
  32.     $('.entry_btn_gibier_lp').on('click', function(event) {
  34.         const currentPageUrl = window.location.href;
  36.         fbq('trackCustom', 'ce_click_gibier_lp', {
  37.             content_type: "ClickGibierBtn",
  38.             content_name: currentPageUrl,
  39.             value: 20
  40.         });
  42.         window.dataLayer.push({
  43.             event: 'ce_click_gibier_lp',
  44.             custom_event_name: 'ce_click_gibier_lp',
  45.             custom_page_url: currentPageUrl,
  46.             custom_user_agent: $("#user_agent").val(),
  47.             custom_is_ig: $("#is_ig").val(),
  48.             custom_is_line: $("#is_line").val(),
  49.             custom_referer: $("#referer").val(),
  50.             custom_real_ip: $("#real_ip").val(),
  51.         });
  53.         _lt('send', 'cv', {
  54.             type: 'ce_click_gibier_lp'
  55.         },['d6fb195c-aa19-4109-8ea0-7b1d883fb349']);
  56.     });
  57.     {% endif %}
  59. </script>
  60. {% if is_prod %}
  61. <!-- Ptengine Tag -->
  62. <script src="https://js.ptengine.jp/58yejdxs.js"></script>
  63. <!-- End Ptengine Tag -->  
  64. {% endif %}
  66. {% endblock javascript %}
  68. {% block stylesheet %}
  69.   <style>
  70.     
  71.     img {
  72.       max-width: 100%;
  73.       display: block;
  74.     }
  76.     a {
  77.       color: inherit;
  78.       text-decoration: none;
  79.     }
  80.     .ec-layoutRole__contents {
  81.         background: #0a0c10;
  82.         max-width: 100% !important;
  83.     }
  84.     .lp-wrapper {
  85.       max-width: 375px;
  86.       margin: 0 auto;
  87.       background: #000;
  88.     }
  89.     
  90.     .lp-section {
  91.       width: 100%;
  92.     }
  93.     .lp-actions__item {
  94.         position: absolute;
  95.         display: flex;
  96.         z-index: 999;
  97.         top: 477px;
  98.         gap: 13px;
  99.         padding: 0px 21px;
  100.     }
  102.     .lp-section img.full {
  103.       width: 100%;
  104.       height: auto;
  105.     }
  107.     /* ヘッダー・ファーストビュー */
  108.     .lp-header {
  109.       background: #d3c39a;
  110.     }
  112.     .lp-fv {
  113.       position: relative;
  114.       overflow: hidden;
  115.       background: #000;
  116.     }
  118.     /* 紹介・説明系のセクション */
  119.     .lp-block {
  120.       background: #000;
  121.     }
  123.     /* CTAやボタン */
  124.     .lp-actions {
  125.       padding: 24px var(--page-padding) 8px;
  126.       background: #000;
  127.       display: flex;
  128.       flex-direction: column;
  129.       gap: 16px;
  130.     }
  132.     .lp-actions__item a,
  133.     .lp-cta a {
  134.       display: block;
  135.     }
  137.     .lp-actions__item img,
  138.     .lp-cta img {
  139.       width: 100%;
  140.       border-radius: 8px;
  141.     }
  142.     .lp-block {
  143.         position: relative;
  144.     }
  145.     .lp-block .lp-cta {
  146.         max-width: 95%;
  147.         left: 10px;
  148.         position: absolute;
  149.         bottom: 32px;
  150.         z-index: 999;
  151.     }
  153.     .lp-actions__item img,
  154.     .lp-cta img {
  155.       box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  156.     }
  158.   </style>
  159. {% endblock %}
  161. {% block main %}
  162. {# ブラウザ判定 #}
  163. {% set isMeta = (app.request.headers.get('User-Agent') matches '/instagram/i' or app.request.headers.get('User-Agent') matches '/facebook/i') %}
  164.   <div class="lp-wrapper">
  166.     <!-- ロゴ・タイアップヘッダー -->
  167.     <section class="lp-section lp-header">
  168.       <img src="{{ asset('assets/img/gibier_lp/header.webp', 'user_data') }}" alt="ぽじとー × シコメル 飲食事業者さま応援企画 第4弾" class="full">
  169.     </section>
  171.     <!-- ファーストビュー -->
  172.     <section class="lp-section lp-fv">
  173.         <img src="{{ asset('assets/img/gibier_lp/fv.webp', 'user_data') }}" alt="珍しいジビエ肉で客単価アップ シコメルでこだわりのジビエ肉加工品販売スタート" class="full">
  174.         <div class="lp-actions__item">
  175.             <!-- 鹿メンチカツの詳細へのリンク -->
  176.             <a href="#shika">
  177.             <img src="{{ asset('assets/img/gibier_lp/action_1.webp', 'user_data') }}" alt="鹿メンチカツ この商品をチェック">
  178.             </a>
  179.             <!-- イノシシベーコンの詳細へのリンク -->
  180.             <a href="#inoshishi">
  181.             <img src="{{ asset('assets/img/gibier_lp/action_2.webp', 'user_data') }}" alt="イノシシベーコン この商品をチェック">
  182.             </a>
  183.         </div>
  184.     </section>
  186.     <!-- ジビエ肉とは？ 鹿肉・イノシシ肉の説明 -->
  187.     <section class="lp-section lp-block">
  188.       <img src="{{ asset('assets/img/gibier_lp/introduction.webp', 'user_data') }}" alt="ジビエ肉にはどんな特徴があるの？ 鹿肉・イノシシ肉の特徴" class="full">
  189.     </section>
  191.     <!-- ジビエ肉のメリット・概要 -->
  192.     <section class="lp-section lp-block" id="about">
  193.       <img src="{{ asset('assets/img/gibier_lp/about.webp', 'user_data') }}" alt="ジビエ肉のメリット 高単価設定でも売れる 他店との差別化 さらに時短でロスなし" class="full">
  194.     </section>
  196.     <!-- 提供イメージ1（鹿メンチカツ） -->
  197.     <section class="lp-section lp-block" id="shika">
  198.       <img src="{{ asset('assets/img/gibier_lp/usage_image_1.webp', 'user_data') }}" alt="シコメルのジビエ肉加工品 提供イメージ1 鹿メンチカツ" class="full">
  199.       <a id="shika-cta">
  200.         <img src="{{ asset('assets/img/gibier_lp/cta.webp', 'user_data') }}" class="lp-cta entry_btn_gibier_lp" alt="購入特典 商品POPデータプレゼント">
  201.       </a>
  202.     </section>
  204.     <!-- 提供イメージ2（イノシシベーコン） -->
  205.     <section class="lp-section lp-block" id="inoshishi">
  206.       <img src="{{ asset('assets/img/gibier_lp/usage_image_2.webp', 'user_data') }}" alt="シコメルのジビエ肉加工品 提供イメージ2 イノシシベーコン" class="full">
  207.       <a id="inoshishi-cta">
  208.         <img src="{{ asset('assets/img/gibier_lp/cta.webp', 'user_data') }}" class="lp-cta entry_btn_gibier_lp" alt="購入特典 商品POPデータプレゼント">
  209.       </a>
  210.     </section>
  211.     {# POP提供訴求 #}
  212.     <section class="lp-section lp-block">
  213.       <img src="{{ asset('assets/img/gibier_lp/pop_present.webp', 'user_data') }}" alt="シコメルのジビエ肉加工品 提供イメージ2 イノシシベーコン" class="full">
  214.     </section>
  215.   </div>
  216. {% endblock %}