How to add HTML in the Opencart?
Opencart has an HTML content module in which you can add the custom HTML in the Opencart and show in any layout you want. Go to admin >> Extensions >> Extensions >> Choose the extension type “Modules”, then look for HTML content and then install it. As HTML content is a multi-instance Opencart module, you can install as many different modules as you want.
See more: difference between single instance and multi-instance Opencart module
Once you install, click the add module button of the HTML content and you will see a form like below:
Click the </> icon then paste the HTML that you have and again click the icon </> and then only the HTML will be saved, else HTML code will not be saved. So be sure to click </> and see WYSIWYG editor and then only click the Save button.
Now, go to admin >> Design >> Layouts and edit where you want to show the module and then select the positions where to show. Here is a video which shows the layouts and position details of Opencart 3
How to add google analytics in the Opencart?
Go to https://google.com/analytics, then log in, choose your accounts and select the “All Web Site Data”, then click in the left menu (1) “Admin”, then to the (2) Tracking Code and then (3) copy the code.
Once you copy the code, go to the Opencart admin >> Extensions >> Extensions >> Choose the extension type “Analytics”. Click the install button.
How to add conversion code on the success page of Opencart?
Conversion codes are mostly added on the success page. Here are the steps to add conversions the Opencart way, it may long way but it is Opencart way taking layouts into consideration:
- Now, go to admin >> Design >> Layouts
- Edit the checkout layout
- Change the module name to “Checkout Cart”
- In the route field change “checkout/%” to “checkout/cart”
- Now, click add a new layout, then enter module name is “Checkout Checkout” and in the route field click “add new” button and add the route as “checkout/checkout” and then click Save.
- Similarly, click add a new layout, then enter the module name as “Checkout Success” and in the route field click “add new” button, enter “checkout/success”, then click the add button on the Content Bottom position and select the Conversion code HTML module, then click Save button.
- With the above steps, the conversions code is shown only on the success page.
In this way, you can add conversion code on the success page only. We made three different layouts because checkout/% took preferences so we cannot create only checkout/success only. Thus we need to create for all of the routes that checkout contains, thus there are three different layouts.
Enter the Account Name, select Country, Container Name, and select Web for a website, then click create button. You will get code to add in your website:
Copy the JS code and go to Opencart admin >> Extensions >> Extensions >> Choose extension type “Analytics”, then install the Google Analytics and edit and you can add the Google tag manager code at the “Google Analytics Code”, enabled it and click save. Once these are done, the google tag manager is installed in Opencart.
Here let’s take an example of MailChimp. Login to the MailChimp, click on the profile, in the dropdown click Connect, then integrations,
Then custom website, enter the website URL, and click “Get Code”.
You will get like below:
Copy that code and paste that code in the google tag manager Custom HTML like below:
Click Save. Then submit.
Enter the version details:
It saved the tag and show details like below: