How to embed your favorite tools in Versoly
As our homepage headline says, we’re a conversion-focused builder, so it’s only natural to take the tools that you love most and implement them in your Versoly website.
To make your life easier, we have compiled a short tutorial on how you can do this with the most popular 5 tools used by our clients: Google Analytics, Google Tag Manager, Mailchimp, Hubspot, and ConvertKit.
How to add Google Analytics
Google Analytics is one of the best solutions out there when it comes to tracking visitors on our websites and the implementation is quite straightforward. To follow the steps below, you need to have an existing Google Account – if you don’t have one, just go to analytics.google.com and create one. Then you’ll be able to follow these steps.
Step 1 – Creating a new property
We’re working with an account that was just created, so the first time you access Google Analytics, you’ll see this screen. All you have to do is click “Start measuring.”
Next, Google will ask for the name of your account – usually, you put the website name here, but you’ll be able to have multiple websites under the same account name so don’t worry about it.
Once you’ve done that, click next at the end of the page to go to the next step.
Now you’ll have to select what you want to measure – a website, an app, or a combination of the two. For now, select Web, and click next at the end of the page.
In this next step, you have to add your website details: the name, the URL, the Industry (look at the list and select the most appropriate for your activity), and the reporting time zone (usually you want to select your country and time zone).
Here’s how the page should look like after you added all the information. Once you click “Create,” Google will ask you to agree to their Terms & Conditions, and then redirect you to the administrator section of your website.
More precisely, you end up in the Administrator (icon down on the left) -> Tracking info -> Tracking code area of your website. You’ll need to remember this path in case you ever want to come back and get the code again.
If you already have an account, you need to go to the Administrator area and create a new property. You’ll end up in the step asking what you want to measure.
Step 2 – Getting the tracking code
The most important elements on this page are the UA code at the top and the actual tracking code that we need to add to our website.
The tracking ID is unique for your website and will never change. There are two ways of adding the code to Versoly; either by using the ID, or by adding the full code. We recommend going with the first one, but we’ll showcase both options.
Step 3 – Adding the code in Versoly
For this step, you need to go to your Versoly account and open your project. Then, click Settings on the left sidebar.
A pop-up with multiple options will open up. Here are two ways of doing it. We recommend you go to Integrations, but there’s also an option to go to External Scripts.
If you go to Integrations, all you have to do is add the ID of the tracking code, the one with UA followed by numbers.
If you go to External Scripts, you need to paste the entire script.
Very important – don’t do both, because you’ll end up with the code published two times, and tracking won’t work properly.
That’s pretty much it. You now have Google Analytics on your website! Let’s not dwell too much on that and move on to the next tool.
How to add Google Tag Manager
In case you haven’t used it before, GTM (Google Tag Manager) is a free tool that allows you to manage and deploy snippets of code or tracking pixels on your website without having to code. It’s a simple tool that can be used by marketers to make the changes they need without going to a developer. For example, all tracking codes, including Google Analytics, can be deployed via GTM.
Step 1 – Creating a new account in GTM
To create an account, go to tagmanager.google.com and sign up using your Google account. Once you’re in the dashboard, click on the grey button in the middle of the screen where it says “Click here to create an account.”
You’ll have to provide information about your website, similar to what we did previously for Google Analytics: account name, country, a container name, and the target platform.
In GTM, you’ll be working with a lot of containers – a container is like a big box of code you want to add to the website. You control what you add in each box/container and how you organize them. For example, you can have one container called “Tracking pixels,” where you add all the tracking pixels from all the platforms. Or you can have one called “Facebook” and another one called “LinkedIn,” and each will contain the tracking pixel for the specific platform and its own events.
After you complete everything click “Create,” agree to the Terms & Conditions, and you’ll see the GTM code.
Step 2 – Getting the code from GTM
All you need to implement it in Versoly is the ID, which can be found in 2 places.
The first location is in the code, in both snippets, as in the print screen above. The second one, which is more accessible, is on the next page after you close the pop-up.
Step 3 – Adding the GTM code in Versoly
Once you copy the code, all you have to do is access the same section, Integrations, but go with a different option, the Google Tag Manager one.
How to embed Mailchimp forms
If you haven’t yet heard of Mailchimp, they are one of the biggest email marketing platforms out of there. They started as a small player handling just newsletters but evolved into a behemoth of a platform or an “All-in-one Integrated Marketing Platform,” as they call it. They are even competing with WIX, Shopify, and other website builders right now, but we’re going to work with their signup forms.
Step 1 – Creating a Mailchimp account
They make things easy for everybody, just go to mailchimp.com, click “Sign Up Free” on the top right corner and fill in your information.
After you click “Sign up,” you’ll receive an email to confirm your address. Clicking on that will take you back to the platform and start the onboarding process. First, you need to select your plan.
Next, you’ll go through a short questionnaire that will help Mailchimp find out more about you and your business. That helps them further down the road to personalize your experience. In the end, you’ll see the main dashboard.
Step 2 – Creating a form
Getting to the exciting part, so let’s create the form that will capture a user’s email address. Click “Create” on the top-left corner and then select Signup form.
Next, select the “Embedded” form and the audience where users will end up once they sign up. For now, you’ll have only one available audience there, so you can select that one and click “Begin.”
At the following step, you’ll see your form and be able to customize it any way you want. For the sake of this example, we have designed a very simple form that collects the email address and the full name of the user.
Step 3 – Integrate the email form in Versoly
In the last step, we’ll bring the signup form on the landing page created in Versoly. First, you need to copy the HTML code from Mailchimp.
In Versoly, you now need to go to “Elements” and then “Email form.” When you click on it, the element will automatically be added at the end of your page.
You should have a space designated to insert your form on the page. Next, you need to add the HTML by editing the code for the newly added element, hit “Run” to compile the code, and the form will be visible on the page.
There’s one step left, required by Mailchimp. If you look at the HTML part you got from them, you’ll see this comment:
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
So, we need to move the CSS file to the head section of the code so the form will show just as it did in Mailchimp.
You now have your first form published on the website.It looks just like in Mailchimp and is ready to capture email addresses.
How to embed Hubspot forms
This section will be a little shorter. We’ll skip the creation of the account and dive straight into the existing form and how to embed it on a Versoly website. Assuming you already have an account and have created a form, the first thing you have to do is visit the “Forms” section in the “Marketing” menu.
You’ll land on a page where you have all your forms listed. You need to select the one you want to embed on Versoly, hover the mouse over its name, select “Actions,” “Share form,” and then go to the “Embed code” tab in the pop-up and copy the code.
Next, go to Versoly and add the code following the same process as before: first “Elements,” then “Email form,” then you edit the code.
To see how your form would look like on the live website, just hit the “Preview” icon on the top left corner of the page and scroll to the edited element.
How to embed Convertkit forms
Just like in the Hubspot case, we’ll assume you already have an account and form created. Once you log into the Convertkit platform, you need to go to “Landing Pages & Forms” and select to edit the form you want to embed.
The difference is that you only have one line of code to add now. Pretty straightforward, right? Hit “Preview” on the top left corner to see how it looks and make the necessary adjustments if needed.
Our journey through all these tools has come to an end for now. Hopefully, this makes it easier for you to embed your favorite tools in the pages you create with us. If you hit any roadblocks, don’t hesitate to contact us by email at support [at] versoly.com. We are here for you, whatever you need.