Magebees Accelerated Mobile Pages Extension for Magento2€¦ · EXTENSION FEATURES 1. Easy to install and admin can disable extension from backend. 2. Automatically generate Google

MageBees a Venture by Capacity Web Solutions Pvt. Ltd.

Support Ticket:- https://support.magebees.com, Support Email:- [email protected]

Accelerated Mobile Pages Extension for Magento 2

User Manual

Accelerated Mobile Pages Extension for Magento 2

By

https://www.magebees.com/

Accelerated Mobile Pages Extension for Magento 2 By MageBees

2 MageBees a Venture by Capacity Web Solutions Pvt. Ltd.


CONTENT

Introduction 3

Features 3

Configuration Settings 4

Manage CMS Page Content for AMP Version 12

Configure Footer Link AMP Block 13

Manage Category Page Display Mode for AMP Version 15

Create AMP Widgets 16

Snapshots of AMP Pages 20

FAQs 25

Support 26




INTRODUCTION

Accelerated Mobile Pages extension is the ultimate trending technology for faster and smoother

loading mobile web pages. This is the generation of mobile and if your website is not working well on

mobile and taking so much of time to load, then you will lose lots of customers but this extension

will increase user engagement on your store and drop the exit rate by load the AMP page within just

a few seconds. This magnificent product will help you to decrease the loading time of your website

and enhance the overall user experience of mobile users. It will also improve site visibility while

searching on a search engine.

EXTENSION FEATURES

1. Easy to install and admin can disable extension from backend. 2. Automatically generate Google AMP Pages for Homepage, Category Pages, Product

Pages,and CMS Pages. 3. Improve store ranking in Mobile Google Search Results. 4. Easily edit AMP CMS Page content from Magento backend. 5. Integrated Google Tag Manager and Google Analytics allow to track user interactions with

AMP pages. 6. Set a color scheme & upload a custom logo for the AMP pages via the Magento admin panel. 7. Admin can use the option "Force AMP On All Mobile Devices" to display AMP pages to

visitors who opened your store directly on mobile or tablet browser. 8. AMP Iframe can be enabled with product options. 9. Provide AMP widget for add the category product slider, Image banner, Image slider, AMP

video, Recently viewed products. 10. Supports bi-directional text support: Left to Right (LTR) and Right to Left (RTL) in Magento 2

templates.




CONFIGURATION SETTINGS

Step-1

Go to admin → STORES → Configuration → MAGEBEES → Accelerated Mobile Page.

You will get the following screen.




Step-2

Click on Settings Tab. You will get the following screen.

Enabled: You can able to enable or disable this module from choosing Yes/No.

AMP Enabled On: Select the pages on which you want to enable the AMP.




AMP Disabled On: You can specify the page URL on which you want to disable the AMP. NOTE: Enter each page URL in a new line, for which you want to disable AMP.

Force AMP on Mobile Devices: On choosing Yes, this option allows to display the AMP version of a site automatically to all mobile users, who opened your store directly. On choosing No, the user will see non-amp pages when landing onto the website directly (not from Google Search Results).

Force AMP on Tablet Devices: On choosing Yes, this option allows to automatically display the AMP version of a site to all tablet users who opened your store directly.

Enable AMP Iframe With Product Options: Choose Yes to activate AMP Iframe which allows displaying product custom options on your Magento 2 Product Page.

Enable RTL Template: This option allows to activate the RTL language support.

Step-3

Click on Social Sharing Tab. You will get the following screen.




Enable Social Sharing: You can able to enable or disable social sharing.

Active Share Buttons: Choose social buttons that will be active on your AMP pages.

Facebook App ID: Enter Facebook ID, this parameter is required for Facebook share

dialog.

Step-4

Click on Design Tab. You will get the following screen.

Design Settings allow you to configure the color scheme of the AMP pages.




Step-5

Click on Header Tab. You will get the following screen.

Show Search Box In Header: With choosing Yes, you can enable Searchbox in the

header.

Contact Phone: Set the contact phone number which will be displayed in the header.

Contact Email: Set the contact email address which will be displayed in the header.

Show Store View Switcher: With choosing Yes, you can enable store view switcher in

the header.

Show Currency Switcher: With choosing Yes, you can enable currency switcher in

the header.




Step-6

Click on Google Tag Manager Tab. You will get the following screen.

Google Tag Manager Snippet: Copy the code for the tag from your Google Tag Manager

account.




Step-7

Click on Logo Tab. You will get the following screen.

Image: Upload the image for the custom logo.

Width: Set the width of the custom logo.

Height: Set the height of the custom logo.




Step-8

Click on Google Analytics Tab. You will get the following screen.

Enable: Select Yes to enable Google Analytics on the AMP page.

Account Number: Enter your Google Analytics account number. You can set up a

separate Google Analytics AMP account for AMP pages, or use the existing one.

Step-9

Click on Facebook Pixel Tab. You will get the following screen.

Enable: Select Yes to enable the Facebook Pixel ID on your AMP page.

Pixel ID: Enter your Pixel ID. It can be found at you Facebook Ads Manager account

> "Tools" tab.




Manage CMS Page Content for AMP Version

Follow the below mention steps to manage the CMS Page content for AMP version of the

website.

Go to admin → CONTENT → Pages.

Select the “Edit” Action for edit the CMS page content.


You can see the “AMP Content” Tab, here you can set the AMP page content for

CMS page.

You can see the “AMP Validation” Button, this will allows to validate AMP Page you

are currently on.




Configure Footer Link AMP Block

Follow the below mention steps to configure the Footer Link AMP Block for AMP version.

Go to admin → CONTENT → Blocks.

Search for "AMP" page in the search field.

Go to "Magebees AMP Footer" block.

Select the “Edit” Action for edit the CMS block.





Enable Block: This option allows to enable or disable the block.

Block Title: This option allows to specify the title of the block.

Identifier: This field shows an identifier for this block. Note: Do not change this identifier.

Store View: This option allows to select the store view the AMP home pages will be visible at.

Content: This option allows to enter the links that will be displayed in the footer of the page.

Click on "Save" button to save your changes.




Manage Category Page Display Mode for AMP Version

Follow the below mention steps to manage the Category Page display mode for AMP

version of the website.

Go to admin → CATALOG → Categories.


"AMP Display Mode" option allows you to select the way your AMP page content

will be displayed on the frontend: you can choose "Default Mode", "Products Only",

"Static block only" or "Static block and products" modes.




Create AMP Widgets

Accelerated Mobile Page Extension Provides below mention AMP widgets. You can use it on

your AMP store.

Magebees :: Amp Category Product Carousel: with this widget, you can add the slider for selected category’s products.

Magebees :: Amp Recently Viewed Products: with this widget, you can display the recently viewed product list.

Magebees :: Amp Slider: with this widget, you can add the slider for uploaded images in widget.

Magebees :: Amp Static Banner: with this widget, you can add the static banner where you want in your AMP store.

Magebees :: Amp Video: with this widget, you can add the video in AMP page.

Follow the below mention steps to add the AMP widget.

1) Go to admin -> CONTENT ->Widgets. 2) Click on “Add Widget” button. 3) For the "Type" select the type of your widget from the drop-down list. For the "Design

Theme" select "Your package/Your theme" and Click on Continue Button.

4) Configure the Storefront Properties.

Type: The widget type has been already set.

Design Package/Theme: The design theme has been already set.

Widget Title: enter the title of the widget.

Assign to Store Views: select the store view to assign the widget.

Sort Order: specify the sort order of the widget.




Add Layout Update: click on this button to configure the layout update.

Display On: select the page to display the widget on.

Container: select the container position to display the widget in.




5) Configure the Widget Options.

Title: specify the title of the widget

Number of Products to Display: enter the quantity of the product that will be displayed in the widget.

Category: select the category from which the products will be selected to display in this widget.

Assign to Store Views: select the store view to assign the widget.

Sort By: Select an option to sort the products by.

Sort Order: Select the "Ascending" or "Descending" sort order from the drop-down.

Display Add To Cart Button: select "Yes" to enable or "No" to disable the Add To Cart Button.




You can also add the widget from the editor using “Insert Widget”.




Snapshots of AMP Pages

You can test the AMP Page from this tool.

[Fig 1: AMP Home Page]

https://search.google.com/test/amp




[Fig 2: AMP Category Page on Mobile and Tablet ]




[Fig 3: Responsive Menu, Sort By and Built-in layered navigation feature in AMP page]




[Fig 4: AMP Product Page]




[Fig 5: RTL and LTR supports in AMP Page]




FAQS

Q-1: I have tried to install “Accelerated Mobile Pages Extension” using the terminal, but I

am not able to install using the command line, what are steps for custom installation of

“Accelerated Mobile Pages Extension”?

Solution:

Please contact us for installing our module in your store.

Q-2: Does this extension works with Shopping Cart and Checkout Pages?

Solution:

Google AMP technology was designed for the Static Pages only. Therefore, AMP Extension works

only on Homepage, Product List Pages, Product Pages, and CMS pages. The pages like Shopping Cart

and Checkout are dynamic, and they cannot be adapted to work with AMP technology yet.




Thank you!

Do you need Extension Support? Please create a

support ticket for a quick reply,

https://support.magebees.com

Do you have any suggestions? Please contact us,

https://www.magebees.com/contact-us

https://support.magebees.com/

https://www.magebees.com/contact-us

Magebees Accelerated Mobile Pages Extension for Magento2€¦ · EXTENSION FEATURES 1. Easy to install and admin can disable extension from backend. 2. Automatically generate Google

Documents