{"id":25739,"date":"2021-06-13T16:29:00","date_gmt":"2021-06-13T13:29:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25739"},"modified":"2021-10-17T20:18:02","modified_gmt":"2021-10-17T17:18:02","slug":"mailchimp-integraatio-yhteydenottolomakkeen-7-laajennuksella","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/mailchimp-integraatio-yhteydenottolomakkeen-7-laajennuksella\/","title":{"rendered":"MailChimp-integraatio yhteydenottolomakkeen 7 laajennuksella"},"content":{"rendered":"

Yhteydenottolomake 7<\/a> on ep\u00e4ilem\u00e4tt\u00e4 yksi WordPressin suosituimmista laajennuksista. T\u00e4m\u00e4n artikkelin kirjoittamisen aikana laajennuksella on yli 5 miljoonaa aktiivista asennusta. Sen suosio on sen yksinkertaisuudessa, helpossa kokoonpanossa ja joustavuudessa. Laajennusta voidaan laajentaa heid\u00e4n tarpeisiinsa koskematta laajennuskoodiin.<\/p>\n

\u00c4skett\u00e4in yksi lukijoistamme kysyi MailChimp-integraatiosta Yhteydenotto 7 -laajennuksen kanssa. He haluavat k\u00e4ytt\u00e4\u00e4 yhteydenottolomakkeen 7 laajennusta uutiskirjeess\u00e4. Sill\u00e4 on s\u00e4hk\u00f6postikentt\u00e4, ja kun lomake on l\u00e4hetetty onnistuneesti, sy\u00f6tetyn s\u00e4hk\u00f6postin tulee lis\u00e4t\u00e4 heid\u00e4n MailChimp-tilaajaluetteloonsa.<\/p>\n

Yhteydenottolomake 7 tarjoaa mukautettuja DOM-tapahtumia<\/a> toimintojensa laajentamiseksi. K\u00e4ytt\u00e4m\u00e4ll\u00e4 yht\u00e4 heid\u00e4n Dom-tapahtumastaan, joka on ’wpcf7mailsent’, voit integroida MailChimp-tilauskoodin.<\/p>\n

Hanki MailChimp-sovellusliittym\u00e4avain ja yleis\u00f6tunnus<\/h3>\n

Ennen kuin aloitamme koodin kirjoittamisen, sinun on ensin napattava MailChimp-sovellusliittym\u00e4avain ja yleis\u00f6tunnus, jotka vaaditaan koodissa. Tartu n\u00e4ihin tietoihin seuraamalla alla olevia ohjeita.<\/p>\n

Kirjaudu<\/a> MailChimp-tilillesi. Valitse k\u00e4ytt\u00e4j\u00e4n kuvakkeesta Tili.<\/p>\n

\"MailChimp-integraatio<\/a><\/p>\n

Napsauta seuraavalla sivulla kohtaa Extra-> API-avaimet<\/strong>.<\/p>\n

\"MailChimp-integraatio<\/a><\/p>\n

Napsauta API-avaimesi -osiossa Luo avain ja kopioi API-avain.<\/p>\n

\"MailChimp-integraatio<\/a><\/p>\n

Hanki seuraavaksi yleis\u00f6tunnus, johon sinun on lis\u00e4tt\u00e4v\u00e4 tilaajat. Napsauta t\u00e4t\u00e4 varten Yleis\u00f6-valikkoa ja valitse sitten Asetukset-vaihtoehto avattavasta Hallitse yleis\u00f6\u00e4.<\/p>\n

\"MailChimp-integraatio<\/a><\/p>\n

Napsauta Asetukset-kohdassa Yleis\u00f6n nime\u00e4 ja oletuksia.<\/p>\n

\"MailChimp-integraatio<\/a><\/p>\n

Seuraavalta sivulta l\u00f6yd\u00e4t yleis\u00f6tunnuksesi.<\/p>\n

\"MailChimp-integraatio<\/a><\/p>\n

Luo lomake yhteydenottolomakkeen 7 laajennuksella<\/h3>\n

Kun olet valmis MailChimp-kirjautumistiedoillesi, seuraava asia, mit\u00e4 sinun tarvitsee tehd\u00e4, on luoda tilauslomake. Siirry Yhteyslomakkeet-valikkoon ja luo se. Koodisi on jotain alla olevasta kuvakaappauksesta.<\/p>\n

\"MailChimp-integraatio<\/a><\/p>\n

Koska olemme tekemisiss\u00e4 uutiskirjelomakkeen kanssa, asetetaan menestysviesti, joka voi vastata lopullista tavoitettasi. Siirry Viestit-v\u00e4lilehteen ja aseta se kuten alla.<\/p>\n

\"MailChimp-integraatio<\/a><\/p>\n

Kopioi nyt luotu lyhytkoodi ja aseta se minne haluat, niin n\u00e4et lomakkeen, jossa on s\u00e4hk\u00f6postikentt\u00e4 ja l\u00e4hetyspainike. Tavoitteenamme on, ett\u00e4 kun k\u00e4ytt\u00e4j\u00e4t kirjoittavat s\u00e4hk\u00f6postin ja painavat L\u00e4het\u00e4-painiketta, t\u00e4m\u00e4 s\u00e4hk\u00f6posti lis\u00e4t\u00e4\u00e4n MailChimp-tilaajalistallesi. Kirjoitetaan sille koodi.<\/p>\n

Lis\u00e4\u00e4 JavaScript-tiedosto WordPressiin<\/h3>\n

Kuten aiemmin sanoin, aion k\u00e4ytt\u00e4\u00e4 Yhteyslomake 7 -laajennuksen Dom-tapahtumaa ’wpcf7mailsent’. Se tarkoittaa, ett\u00e4 meid\u00e4n on kirjoitettava pieni pala JavaScript-koodia. Ensinn\u00e4kin sen on sis\u00e4llett\u00e4v\u00e4 JS-tiedosto, sanotaan custom.js<\/code>WordPress-sivustollesi. Meid\u00e4n on my\u00f6s k\u00e4ytett\u00e4v\u00e4 Ajaxia, joten liit\u00e4n JS-tiedostoon WordPress Ajax-URL-osoitteen ja nonce-tiedoston. functions.php<\/code>Lis\u00e4\u00e4 aktiivisiin teemoihisi alla oleva koodi.<\/p>\n

<?php\n...\n...\nfunction custom_enqueue_scripts() {\n\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array(), false, true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'subscribe_user' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );<\/code><\/pre>\n
Yll\u00e4 oleva koodi sis\u00e4lt\u00e4\u00e4 custom.js<\/code>tiedoston sivustolla ja liitt\u00e4\u00e4 Ajax URL-osoitteen, ei-avaimen blogi-muuttujaan.<\/p>\n
Sinun custom.js<\/code>tiedosto on seuraavat JavaScript-koodin.<\/p>\n
document.addEventListener( 'wpcf7mailsent', function( event) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if ('YOUR_CONTACT_FORM_ID' == event.detail.contactFormId) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var inputs = event.detail.inputs;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (var i = 0; i < inputs.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ('your-email' == inputs[i].name) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'subscribe_user_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email': inputs[i].value,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0jQuery.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n}, false );<\/code><\/pre>\n
Korvaa paikkamerkki ’YOUR_CONTACT_FORM_ID’ todellisella arvollasi. Voit saada t\u00e4m\u00e4n tunnuksen yhteydenottolomakkeen lyhytkoodista. T\u00e4m\u00e4 vaaditaan, koska koodimme tulisi suorittaa vain uutiskirjelomakkeella eik\u00e4 muilla yhteydenottolomakkeilla.<\/p>\n
\"MailChimp-integraatio<\/a><\/p>\n
Merkkijono ’your-email’ on nimi, jonka olen antanut s\u00e4hk\u00f6postikent\u00e4lleni. Se pysyy sellaisena kuin se on. Jos huomasit, ett\u00e4 olen k\u00e4ytt\u00e4nyt toimintoa nimell\u00e4 "tilaa_k\u00e4ytt\u00e4j\u00e4_my_ajax", jota k\u00e4ytet\u00e4\u00e4n soittamaan Ajax-soittomenetelm\u00e4\u00e4mme, jossa kirjoitan koodin MailChimp-tilaukseen.<\/p>\n
MailChimp-integraatio yhteydenottolomakkeen 7 laajennuksella<\/h3>\n
T\u00e4h\u00e4n menness\u00e4 olemme luoneet uutiskirjelomakkeen, kirjoittaneet JS-koodin, joka suoritetaan lomakkeen onnistuneelle l\u00e4hett\u00e4miselle. Seuraava osa on ottaa s\u00e4hk\u00f6posti ja l\u00e4hett\u00e4\u00e4 se MailChimpille MailChimp-sovellusliittym\u00e4n avulla. JS-koodissa k\u00e4ytimme toimintoa ’tilaa_k\u00e4ytt\u00e4j\u00e4_my_ajax’, joten kirjoitetaan sille Ajax-soittokoodi.<\/p>\n
Lis\u00e4\u00e4 alla oleva koodi teeman functions.php<\/code>tiedostoon.<\/p>\n
<?php\n...\n...\n\u00a0\nfunction subscribe_user_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('subscribe_user', 'security');\n\u00a0\u00a0\u00a0\u00a0$email = $_POST['email'];\n\u00a0\u00a0\u00a0\u00a0$audience_id = 'YOUR_MAILCHIMP_AUDIENCE_ID';\n\u00a0\u00a0\u00a0\u00a0$api_key = 'YOUR_MAILCHIMP_API_KEY';\n\u00a0\u00a0\u00a0\u00a0$data_center = substr($api_key,strpos($api_key,'-')+1);\n\u00a0\u00a0\u00a0\u00a0$url = 'https:\/\/'. $data_center .'.api.mailchimp.com\/3.0\/lists\/'. $audience_id .'\/members';\n\u00a0\u00a0\u00a0\u00a0$auth = base64_encode( 'user:'. $api_key );\n\u00a0\u00a0\u00a0\u00a0$arr_data = json_encode(array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email_address' => $email,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'status' => 'subscribed' \/\/pass 'subscribed' or 'pending'\n\u00a0\u00a0\u00a0\u00a0));\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$response = wp_remote_post( $url, array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'method' => 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'headers' => array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Content-Type' => 'application\/json',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Authorization' => \"Basic $auth\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'body' => $arr_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (is_wp_error( $response)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error_message = $response->get_error_message();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Something went wrong: $error_message\";\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$status_code = wp_remote_retrieve_response_code( $response );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0switch ($status_code) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case '200':\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $status_code;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case '400':\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$api_response = json_decode( wp_remote_retrieve_body( $response ), true );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $api_response['title'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo 'Something went wrong. Please try again.';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}\nadd_action('wp_ajax_subscribe_user_by_ajax', 'subscribe_user_by_ajax_callback');\nadd_action('wp_ajax_nopriv_subscribe_user_by_ajax', 'subscribe_user_by_ajax_callback');<\/code><\/pre>\n
Muista korvata paikkamerkit ’YOUR_MAILCHIMP_AUDIENCE_ID’ ja ’YOUR_MAILCHIMP_API_KEY’ todellisilla MailChimp-kirjautumistiedoillasi. Yll\u00e4 oleva koodi l\u00e4hett\u00e4\u00e4 s\u00e4hk\u00f6postin ja l\u00e4hett\u00e4\u00e4 sen MailChimp-tilauksen API-p\u00e4\u00e4tepisteeseen. Asetan my\u00f6s tilaksi "tilattu", mik\u00e4 tarkoittaa, ett\u00e4 s\u00e4hk\u00f6posti tilataan suoraan luetteloosi. Jos haluat l\u00e4hett\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4lle vahvistuss\u00e4hk\u00f6postin tilauksen vahvistamiseksi, aseta tilaksi "odottaa".<\/p>\n
Kyse on MailChimp-integraatiosta Yhteydenotto 7 -laajennuksen kanssa. Toivottavasti pidit opetusohjelmasta. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n