Popup kitöltése Facebook fiókadatokkal

Ahhoz, hogy egy látogatónak a Facebook adataihoz hozzáférjünk szükségünk van egy Facebook App-ra, amelyhez hozzáférhet a látogató fiókadataihoz.

Az App létrehozásához a https://developers.facebook.com oldalra és regisztráljuk a már meglévő Facebook fiókunkat fejlesztőként is.
Ha ezzel megvagyunk, akkor hozzunk létre egy új Website alkalmazást. Ezután rendelkezünk egy App ID-val és egy verzió számmal, amelyet a oldalunkban kell elhelyezni.
Ha ezzel megvagyunk, navigáljunk az OptiMonk admin felületén a kreatív szerkesztése oldalra és kattintsunk a "CSS és JS szerkesztése" linkre majd a felnyíló panelen a "JS szerkesztése" gombra és másoljuk be a lentebb található kódot, majd kattintsunk a "Változások megtartása és Bezár" gombra, majd mentsük el a módosításokat a jobb felül található gombok segítségével.

Beillesztendő kód:

$(document).ready(function () {
    // Készítünk egy sortörés elemet a Facebook linkük elhelyezésének céljából
    var br = document.createElement('br');
    // Készítünk egy linket, amire kattitva majd kitöltjük a popup inputokat a megfelelő adatokkal
    var connectWithLink = document.createElement('a');
    connectWithLink.href = '#';
    connectWithLink.innerHTML = 'Facebook fill';
 
    // Kiválasztjuk azt az elemet, amibe beillesztjük az új elemeket
    // Az OM-conversion-privacyPolicyDisplay CSS osztály az adatvédelmi nyilatkozat elem, amely a beépített input mezőket tartalmazó sablonokban található meg
    // Ez az elem nem minden esetben lesz megfelelő
    jQuery(".OM-conversion-privacyPolicyDisplay")
        .prepend(br) // Hozzáadjuk az új sor element,
        .prepend( // Majd a linket
            jQuery(connectWithLink).on('click', function () {
                OptiMonk.executeOnSite(
                    function (responseHandler) {
                        FB.getLoginStatus(function(response) {
                            if (response.status != 'connected') {
                                FB.login(function (response) {
                                    FB.api('/me', {fields: 'id,name,email'}, function (response) {
                                        responseHandler(response);
                                    });
                                }, { scope: 'email' });
                            } else {
                                FB.api('/me', {fields: 'id,name,email'}, function (response) {
                                    responseHandler(response);
                                });
                            }
                        });
                    },
                    function (response) {
                        // A response objektum tartalmazza az id, name és email attribútumokat
                        // A name attribútummal kitöltjük a keresztnév mezőt
                        jQuery("#OM-conversion-formFirstnameInput").val(response.name);
                        // Az email attribútummal pedig kitöltjük az email mezőt
                        jQuery("#OM-conversion-formEmailInput").val(response.email);
 
                  }
              );
          })
      );
  });