GTM example

about-us.vue

<template>
  <div class="container pt-5 mt-5 about-us-container">
    <div class="row">
      <div class="text-center col-lg-12">
        <h1>Rólunk</h1>
        <p>Minőségi ételek, verhetetlen áron!</p>
      </div>
    </div>

    <div class="mt-5 row">
      <div class="col-lg-7">
        <img class="img-fluid" src="/images/HeroAbout01.png" />
      </div>
      <div class="col-lg-5 description">
        <img
          class="d-none d-lg-block"
          src="/images/Sun.svg"
          height="50"
          width="50"
        />
        <div>
          A Food Finder egy folyamatosan frissülő online piactér, ahol rendkívül
          kedvezményes áron, egyszerűen és gyorsan vásárolhatsz finom ételeket.
        </div>
      </div>
    </div>

    <div class="row">
      <div class="mt-5 text-center col-lg-12">
        <div class="about">
          Partnereink éttermek, kifőzdék, pékségek és cukrászdák, akik többlet
          élelmiszereiket szeretnék értékesíteni oldalunkon keresztül.
          Megéheztél?
        </div>
        <div class="description-box">
          <a class="description-button">Megnézem a kínálatot!</a>
          <span class="button-shadow">Megnézem a kínálatot!</span>
        </div>
      </div>
    </div>

    <div class="about-div d-none d-lg-block">
      <div class="row">
        <div class="col-lg-4">
          <div class="about-description">
            <img src="/images/1.svg" />
            Neked!<br />
            Finom ételek, megfizethető áron
          </div>
        </div>
        <div class="col-lg-4">
          <h4>Kinek jó a Food Finder?</h4>
          <img class="d-none d-lg-block know-it" src="/images/Tudtad.svg" />
          <div class="about-description about-2">
            <img src="/images/2.svg" />
            Éttermeknek! <br />
            Extra bevétel, fenntartható működés<br /><br />
          </div>
        </div>
        <div class="col-lg-4">
          <div class="about-description">
            <img src="/images/3.svg" />
            A bolygónak! <br />
            Kevesebb ételpazarlás, élhetőbb környezet
          </div>
        </div>
      </div>
    </div>

    <div class="row about-bottom">
      <div class="col-lg-9">
        <h4>Cselekedj most!</h4>
        <p>
          Azzal, hogy megmentesz egy ételt, az előállításhoz felhasznált víz,
          energia és emberi munka nem válik fölöslegessé. A Food Finder most
          lehetőséget ad mindenkinek, hogy tehessen egy fenntarthatóbb jövőért.
        </p>
      </div>
    </div>

    <div class="mt-5 row">
      <div class="text-center col-12 col-lg-5">
        <div class="description-box">
          <n-link
            to="/marketplace"
            class="description-button description-button2"
            >Csatlakozz te is a mozgalomhoz!</n-link
          >
          <span class="button-shadow button-shadow2"
            >Csatlakozz te is a mozgalomhoz!</span
          >
        </div>
        <img class="d-none d-lg-block chicken" src="/images/ChickenArrow.svg" />
      </div>
      <div class="col-lg-7 d-none d-lg-block">
        <img class="img-fluid" src="/images/HeroAbout02.png" />
      </div>
    </div>
  </div>
</template>

<script>
import pageview from '~/mixins/pageview.js'
export default {
  mixins: [pageview],
  head() {
    return {
      title: 'Rólunk - FoodFinder',
    }
  },
}
</script>

index.vue

<template>
  <div>
    <div class="home-div">
      <div class="main1">
        <div class="container">
          <div class="row">
            <div class="pt-5 text-center col-lg-12">
              <h1>(T)Egyél jót, kevesebbért!</h1>
              <div class="description">
                Itt vehetsz ételt a legjobb áron! Segítünk pénzt és időt
                spórolni miközben megfékezzük az ételpazarlást.
                <div class="mt-5">
                  <n-link to="/marketplace" class="shadow-button">
                    Megnézem a kínálatot!
                  </n-link>
                </div>
              </div>
            </div>
          </div>

          <div class="row home-image">
            <div class="pb-5 text-center col-lg-12">
              <img class="mt-5 img-fluid" src="/images/home1.png" />
            </div>
          </div>
        </div>
      </div>

      <div class="how-it-works-container">
        <div class="how-it-works-image">
          <img class="img-fluid" src="/images/burger-and-chips.svg" />
        </div>

        <div class="how-it-works-div">
          <div class="container">
            <div class="col-lg-12">
              <h1>Hogyan működik?</h1>
              <div class="row box box1">
                <div class="col-lg-7">
                  <div class="text-center left-box text-md-left">
                    <img class="img-fluid" src="/images/1.svg" />
                    <h3>Találj valami finomat</h3>
                    <div class="desc">
                      Böngéssz partnereink akciós ajánlatai között és használd
                      az egyszerű online fizetést! A legjobb ételekre hamar
                      lecsapnak, úgyhogy gyorsnak kell lenned!
                    </div>
                  </div>
                </div>
                <div class="col-lg-5 d-none d-lg-block">
                  <img
                    class="float-right img-fluid img"
                    src="/images/IMG1.png"
                  />
                </div>

                <div class="mt-5 col-lg-5 d-none d-lg-block">
                  <img
                    class="float-left img-fluid img-2"
                    src="/images/IMG2.png"
                  />
                </div>
                <div class="col-lg-7">
                  <div class="text-center right-box text-md-left">
                    <img class="img-fluid" src="/images/2.svg" />
                    <h3>
                      <!--                                        <img class="img-fluid" src="../../../assets/images/rice-bowl.svg"/>-->
                      Ejtsd útba!
                    </h3>
                    <div class="desc">
                      A megadott időpontig bármikor kézhez veheted a rendelésed.
                      Telefonoddal tudod magad igazolni.
                    </div>
                  </div>
                </div>
              </div>

              <img class="box-2-img" src="/images/Path2.svg" />

              <div class="row box">
                <div class="col-lg-7">
                  <div class="text-center left-box text-md-left box2">
                    <img class="img-fluid img-3" src="/images/3.svg" />
                    <h3>Jó étvágyat</h3>
                    <div class="desc">
                      Megmentettél egy finom ételt a kidobástól és még a
                      pénztárcád is örül!
                    </div>
                  </div>
                </div>
                <div class="col-lg-5 d-none d-lg-block">
                  <img
                    class="float-right img-fluid img3"
                    src="/images/IMG3.png"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="home-div marketplace-div jumbotron">
      <div class="container"></div>
    </div>

    <div class="home-last-div jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-12 col-lg-12">
            <div class="box">
              <h1>
                Akciósan, finomat
                <img
                  class="float-right mt-5 img-fluid d-none d-lg-block"
                  src="/images/KnifeFork.svg"
                />
              </h1>
              <div class="description">
                <div class="row">
                  <div class="col-lg-11">
                    Fedezd fel a közeli éttermek kínálatát a Food Finder-el.
                    Egyre több vendéglátóhely csatlakozik a mozgalomhoz, hogy az
                    el nem adott ételeiket kedvezményes áron értékesítsék.
                  </div>
                </div>
              </div>
              <img
                class="float-right img-fluid bag d-none d-lg-block"
                src="/images/BagwLogo.png"
              />
              <div class="buttons">
                <div class="row">
                  <div class="d-none d-lg-block col-6 col-lg-4">
                    <div class="description-box">
                      <n-link to="/marketplace" class="description-button"
                        >Tovább böngészek</n-link
                      >
                      <span class="button-shadow">Tovább böngészek</span>
                    </div>
                  </div>
                  <div class="col-12 col-lg-6">
                    <div class="description-box">
                      <n-link
                        to="/registration"
                        class="description-button button2"
                      >
                        Regisztrálok
                      </n-link>
                      <span class="button-shadow green-shadow">
                        Mi van a közelben?
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageview from '~/mixins/pageview.js'
export default {
  mixins: [pageview],
  head() {
    return {
      title: 'FoodFinder - (T)Egyél jót, kevesebbért!',
    }
  },
}
</script>

pageview.js

export default {
  mounted() {
    if (process.browser) {
      this.$gtag('config', process.env.googleAnalyticsId, {
        page_title: this.$metaInfo ? this.$metaInfo.title : document.title,
        page_path: this.$route.fullPath,
      })
    }
  },
}