JavaScript pro PPCéčkaře - mé kódy a zdroje

Autor: Michal Blažek, MarketingMakers.net

by michalmarketingmakers

HTML

<!doctype html>
<html>

  <head>
    <title>JavaScript pro PPCéčkaře - workshop na zimním PPC kempu</title>
  </head>

  <body>
  </body>

</html>

CSS

/*  
1. Kam a v čem psát JavaScript
      a) hlavička, tělo, patička - výhody, nevýhody, zpracování skriptu. 
      b) pozor na zdroje - definice proměnné a funkcí - například pro FB
      c) editor
2. Legal disclaimmer :)
3. Proměnné a jejich definice
4. Logování do konzole a práce s konzolí. 
5. Pole
6. Objekt
7. Kombinace předchozích 
8. Funkce a jejich parametry
      Velmi dobrý je tento popis - https://medium.com/@ajdin.imsirovic/the-anatomy-of-a-javascript-function-part-1-49a71d48dfb1, vysvětluje i proč kde psát tečku, jakou závorku apod.
9. Návratové hodnoty funkci
10. Facebook pixel (https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking/), vzor je zde, nefunguje správně offline - http://resources.marketingmakers.net/fb.html
11. DataLayer Google Tag Manager
12. DataLayer / pushování událostí Google Analytics 
       a) staré GA - https://developers.google.com/analytics/devguides/collection/analyticsjs/events
       b) nové GA - https://developers.google.com/analytics/devguides/collection/gtagjs/events
13. Ecommerce tracking nebo i enhanced ecommerce
14. Podmínky (if, else) - hlavně kontrola existence   
        Je možné najít několikrát i v Google skriptech - if (CONFIG.ACCOUNT_LABEL) { accountSelector = accountSelector .withCondition('LabelNames CONTAINS "' + CONFIG.ACCOUNT_LABEL + '"');   }  
        kontrola, jestli se FB načetl - <script> if (typeof fbq == 'function') { fbq('track', 'AddToCart'); }</script>
15. Cykly (for, while, foreach, ?) - hezký rozdíl for a foreach - https://codeburst.io/javascript-the-difference-between-foreach-and-for-in-992db038e4c2
       a) iterace polem dle délky, 
       b) délka (lenght), value, html atd. 
 16. Heureka - pokročilý skript  - https://sluzby.heureka.cz/napoveda/mereni-konverzi/
17. Práce s PPC scripty, řešení velkých účtů - https://developers.google.com/google-ads/scripts/docs/solutions/link-checker - například si můžete upravit podmínku withCondition, například úpravou...

JavaScript

function vypis_treti(nejake_pole) {
    console.log("Třetí položkou v poli je:" + nejake_pole[2])
  }

  function kdo_je_vetsi(prvni, druhy) {
    if (prvni > druhy) {
      return "První je větší";
    } else if (druhy == prvni) {
      return "Jsou stejné";
    } else {
      return "Druhý je větší";
    }
  }

  var promenna = "ahoj";
  console.log(promenna);
  var pole = ["ahoj", "cau", "nazdar"];
  console.log(pole[0]);
  var objekt = {
    "typ": "pozdrav",
    "text": "ahoj"
  };
  console.log(objekt.typ)
  var superobjektpole = [{
    "dny": ["pondeli", "utery", "streda", "ctvrtek"]
  }, {
    "mesice": ["leden", "unor", "brezen"]
  }];
  console.log(superobjektpole[1].mesice[1]);
  vypis_treti(pole);


  var i;
  var text = "";
  for (i = 0; i < pole.length; i++) {
    text += pole[i] + "<br>";
  }
  document.body.innerHTML += text; // abychom nemuseli psát ošklivé document.write(text), tak připojíme na konec webu


  console.log(kdo_je_vetsi(15, 25));
  // Deklarace dataLayer základ
  dataLayer = [];

  // Deklarace dataLayer vylepšená (vysvětlení https://www.simoahava.com/gtm-tips/datalayer-declaration-vs-push/)
  // window.dataLayer = window.dataLayer || [];  
  // Send transaction data with a pageview if available
  // when the page loads. Otherwise, use an event when the transaction
  // data becomes available.
  dataLayer.push({
    'event': 'transakce',
    'ecommerce': {
      'purchase': {
        'actionField': {
          'id': 'T12345', // Transaction ID. Required for purchases and refunds.
          'affiliation': 'Online Store',
          'revenue': '35.43', // Total transaction value (incl. tax and shipping)
          'tax': '4.90',
          'shipping': '5.99',
          'coupon': 'SUMMER_SALE'
        },
        'products': [{ // List of productFieldObjects.
            'name': 'Triblend Android T-Shirt', // Name or ID is required.
            'id': '12345',
            'price': '15.25',
            'brand': 'Google',
           ...