In this tutorial, we will help you implement Universal Integration from edrone on your WordPress store platform.
Integration consists of three simple steps:
Adding an initialization script to the
<head>section for each subpage.Generating a product feed on the platform and implementing it in the edrone panel.
Adding a script to the Thank You Page that sends information about completed orders.
You can find all the basic scripts you need to add on the store side in the edrone documentation on docs.edrone.me/universal-integration.html. You'll also find a short explanatory manual.
IMPORTANT: The base code will be different from the final scripts you will be adding to the store platform. This depends on the individual platform's way of providing parameter values such as 'product ID', 'email address', 'order value', etc. This information must be extracted from the store platform and passed to our script.
Regarding the requirements for preparing a product feed, you can find them in our FAQ at help.edrone.me by typing the keyword 'feed' in the search field.
1. INITIALIZATION SCRIPT IN THE <HEAD> SECTION
Moving on, in the first step, add the initialization script to the <head> section of the source code of the store page. The code below is already properly prepared for the WordPress platform. You will only need to make a minor adjustment in it by adding your edrone account's App ID in the code.
function inject_email_to_javascript() {
$current_user = wp_get_current_user();
$email = '';
if ($current_user->exists()) {
$email = $current_user->user_email;
}
?>
<script type="text/javascript">
(function (srcjs) {
let userEmail = "<?php echo $email; ?>";
window._edrone = window._edrone || {};
_edrone.app_id = 'YOUR_APP_ID';
_edrone.platform = 'universal';
if (userEmail !== '') {
_edrone.email = userEmail;
}
let doc = document.createElement('script');
doc.type = 'text/javascript';
doc.async = true;
doc.src = ('https:' === document.location.protocol ? 'https:' : 'http:') + srcjs;
let s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(doc, s);
})("//d3bo67muzbfgtl.cloudfront.net/edrone_2_0.js?app_id=YOUR_APP_ID");</script>
<?php
}
add_action('wp_head', 'inject_email_to_javascript');You can do this in several ways (below 3 examples):
By implementing our code using a child theme.
By using a dedicated plugin that puts the code in the right place.
By using Google Tag Manager.
In this tutorial we will perform such an integration using a child theme. This is a theme that inherits the look of the parent theme and includes our own modifications. We use such themes so that our individual code changes are not overwritten and deleted when we update the parent theme.
You can create a child theme either manually or using a dedicated plugin. To make it faster and simpler, we will use the Child Theme Configurator plugin for this purpose.
IMPORTANT: If you already have individual changes in your style sheets, for example, or are using a theme not supported by Child Theme Configurator in the free version, you will have to adjust the plugin's settings to suit your needs.
If you already have a child theme, you can skip the step of creating it and make changes to the current one.
Now follow the steps of the instructions. We are in the WordPress main panel. Go to the Plugins > Add New. Search for the 'Child Theme Configurator' plugin. Install it and activate it.
It will appear under Tools > Child Themes. Go to this tab. Here you will create your child theme. In point #2, select your theme from the list and click Analyze. If the message 'This theme appears OK to use as a Child theme' is displayed, you can move on.
All other settings can remain unchanged. In step #4, you can change the name of the child theme. In step #8, you can add an option to replace menu settings with those of the parent theme. You can easily find more information about creating child themes using Google search.
Confirm the creation of the child theme with the 'Create New Child Theme' button. The child theme will be created.
The Files tab contains a list of all the files that are in the original theme. Here we can see that the functions.php file we need is copied to the child theme.
The created child theme is now in the list of themes to choose from under Appearance > Themes. Activate it.
Now go to Appearance > Theme File Editor and navigate to the functions.php file. In the opened file, at the end of it, add the edrone initialization code.
In the added code, you need to make changes to one App ID element in two places. The point is to add the appropriate edrone account ID in the designated places so that the script knows to which account it should send the gathered data.
The App ID of your edrone account can be found by going from the main edrone panel to SETTINGS > INTEGRATION. Copy the App ID and paste it in the designated places in the code you added earlier.
When all changes are done, click Update File.
BRAVO! The first step is behind us. At this point, information about events performed on the site by customers is sent to the edrone system. Let's move on to the next step.
2. PRODUCT FEED
In order for our system to correctly identify sent events, it will be necessary to add a product feed in the form of an .xml link. On its basis we recognize events such as viewing a product or adding products to the shopping cart. Therefore, it is very important that the product feed is up-to-date and configured according to our requirements.
There are many free plugins that allow you to generate a product feed for a store built on WooCommerce. We will now use one of them to prepare such a file.
Which feed generation plugin you use is completely up to you. For demonstration purposes for this tutorial, we are using the Product Feed PRO for WooCommerce plugin.
Go to Plugins > Add New and type 'feed' in the search engine. Now select one of the modules for generating feed. Click Install Now and then Activate.
Now go to the general settings of the new module. Select the project name, country, file standard - we recommend Google Shopping / Google Merchant Center - and its format (XML). Here you can also set additional options for product variants. Save the settings and move on.
We are now in the field mapping tab. It is important to add all the necessary attributes to the product feed. The requirements for preparing a product feed can be found in our FAQ at help.edrone.me.
We map such fields as product ID, title, description, URL link, main photo, availability, price, category path (at Product type attribute). The other fields are not important at this time. Save your settings and move on.
You can skip the next two steps by clicking Save mappings and Continue. In the last step, turn off Google Analytics tracking and generate the feed.
We will see a window with the created projects. Expand the settings by clicking the pinwheel. At the bottom you can find a link to the created file.
You already have a generated product feed link, so now log into your edrone panel and go to SETTINGS > PRODUCT FEED. Then click IMPORT NEW FEED, paste the prepared link and click ADD.
Done! The product feed has been added to our system.
The time to process the product feed depends on the size of the file. It should not take more than a few minutes.
3. CODE ON THE THANK YOU PAGE AFTER PURCHASE
The final step remains for you to complete. Adding a script that sends information about orders placed. To do this, we need to put the code we prepared on the post-purchase thank you page.
To do this, use the child theme you created earlier. Go to Appearance > Theme File Editor again and open the functions.php file.
In the open file at the end - below the previously added initialization code - add the code responsible for sending order information. Then update the file.
function edrone_js_thankyou_page( $order_id ) {
$order = wc_get_order( $order_id );
$email = $order->get_billing_email();
$name = $order->get_billing_first_name();
$order_total = $order->get_total();
$items = $order->get_items();
$product_ids = array();
foreach ( $items as $item ) {
$product_id = $item->get_product_id();
$product_ids[] = $product_id;
}
$product_ids_string = implode('|', $product_ids);
?>
<script type="text/javascript">
var orderDetails = {
orderId: "<?php echo $order_id; ?>",
email: "<?php echo $email; ?>",
name: "<?php echo $name; ?>",
productIds: "<?php echo $product_ids_string; ?>",
orderTotal: "<?php echo $order_total; ?>",
};
window._edrone = window._edrone || {};
_edrone.app_id = 'YOUR_APP_ID';
_edrone.email = orderDetails.email;
_edrone.first_name = orderDetails.name;
_edrone.platform = 'universal';
_edrone.action_type = 'order';
_edrone.product_ids = orderDetails.productIds;
_edrone.order_id = orderDetails.orderId;
_edrone.base_payment_value = orderDetails.orderTotal;
_edrone.order_payment_value = orderDetails.orderTotal;
</script>
<?php
}
add_action( 'woocommerce_thankyou', 'edrone_js_thankyou_page' );The same as for the initialization code, you need to add the appropriate App ID of the edrone account in the dedicated field.
The code is already configured in such a way that no other additional changes need to be made after implementation.
That's it, the integration is done correctly!
ADDITIONAL INFORMATION
If you want to verify the validity of the completed integration, in the edrone panel go to SETTINGS > INTEGRATION > EVENT MONITOR. Here you can check what events are being sent to edrone.
Also contact your account manager or write to hello@edrone.me. We will check the validity of the integration done for you, and we will make plug-ins for all the newsletter sign-up forms available on the store's website.
I hope that the whole process of completing the integration was successful. If you have any additional questions, feel free to contact us.