You are reading the article Title Tag Optimization Guide For Google updated in November 2023 on the website Eastwest.edu.vn. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested December 2023 Title Tag Optimization Guide For Google
Are you feeling overwhelmed when it comes to optimizing your website for Google? Don’t worry; you are not alone! One of the most important things for a website owner or manager to understand is how to optimize title tags for Google. Title tags, often referred to as “title elements,” are actually the words associated with each web page that appear in a user’s search results.
Title Tag- A Brief OverviewThe title tag is an HTML tag located in the head section of a webpage. It includes text that gives context about the content on the page.
Ways to optimize Title Tags for GoogleHere are the following ways to optimize your title tags for search engines −
Keep the title length optimalGoogle actually has not recommended any length for title tags. However, SEO analysts recommend keeping the characters within 50-60. Research suggests that characters under 60 can easily display 90% of the title correctly in SERP in most mobile and desktop browsers.
There are no specific character limits, as the display of title tags varies per pixel width. Usually, google SERPs can display up to 600 pixels. Hence, writing concise titles is better. It ensures users get the most information with minimal reading.
The best thing is Google considers the entire title tag. It doesn’t matter if your title tag exceeds the minimal character length. However, it will not be fully displayed on the SERP.
Use concise titlesAs discussed above, you should keep the title within 60 characters. If you use length titles, Google will shorten or rewrite ma it. So, keep it brief and concise.
It’s not a bad thing to skip your brand name to include more information about your products or services.
Try the following tips to shorten your title −
Use symbols like & instead of writing “and” to save space
Remove the brand name if necessary
Avoid using caps, as uppercase letters take up more space
Use Unique Titles Insert only one primary keywordIn the title tag, you have stuffed three keywords like
If it’s challenging to use one target keyword for a page, you can do two things. First, you can try creating separate pages for each keyword. Second, you can pick one primary keyword for the title and use the rest in Meta descriptions.
Use a title relevant to the page’s contentThe content within the page is the critical factor for ranking. Don’t use a title different from what is inside the page. Visitors will leave if they can’t find the information they need. This will increase the bounce rate. When google notice people are leaving your site, it will lower the page’s ranking.
The title tag introduces users to the content of the page. Google will automatically ignore tags that are not related to the page. The key is to link the title and contents of the page. You can do that by using the same keyword in the title in the page’s content, like Meta description, URL, body copy and image alt attribute, etc.
Use dynamic alternatives if possibleIt is strenuous to write title tags for hundreds and thousands of web pages. You need to semantically code your tags if you have a large website such as an ecommerce website.
Most website platforms and content management systems automatically generate the title tag for a page. Besides, you can always override or customize a page to add more details in the title.
You can create a dynamic structure by adding standard text to all product page tags. The system will automatically produce the product name.
Let’s say you use the standard line “Buy affordable [product_name] online at company X.”
The content management system will automatically populate the product name in the bracketed part from the database.
The dynamic title method is helpful when selling the same product in different variations or attributes, such as colors, sizes, etc.
Use call-to-action if possibleUse important words, phrases, the primary keyword, and a CTA. Be direct and concise, and ensure the target words appear at the start of the title tag.
If you are selling perfumes for men, you should go for actionable language like
Shop long-lasting and exotic perfume for men at company X.
ConclusionDon’t put yourselves under too much pressure to perfect the title tag. Although it plays an essential role in SEO, you need more than a title tag to rank in SERP. Title tag optimization serves as a tool to convert searchers into visitors. However, it won’t work until you rank on the top of the SERP.
You're reading Title Tag Optimization Guide For Google
Google Tag Manager Tutorial For Beginners
Are you new to Google Tag Manager but want to learn what GTM is all about and how to use it?
Google Tag Manager is a powerful tracking tool that is used by almost all digital marketers.
Let’s dive in!
How Google Tag Manager WorksGoogle Tag Manager is an all-in-one Tag management system that allows us to integrate all our tracking needs into one user-friendly interface without constantly implementing various codes on our system.
You can install the scripts manually by adding pixel code to the website. These are known as the marketing Tags.
You can also access your code editor to customize the script according to your needs. You can also have an overview of all the codes installed on your website from this code.
However, Google Tag Manager eliminates this need to implement various codes. You can simply install the central snippet of Google Tag Manager on your page.
After implementation of the code, all your Tags can be managed through the graphic interface of the Google Tag Manager system.
You simply need to configure the data that you wish to track and create triggers for each data set. Triggers are the rules that define intervals or times at which your Tags get fired.
Finally, you can configure the Tag and send it over to the marketing vendors. After successfully deploying the Tag, GTM implements your tracking codes in the background.
You have a version control system that allows you to control any published changes on your website, a preview mode to test your Tags before they go live, and a management function that helps to monitor everything.
Overall, this is a more flexible and granular way to organize your marketing Tags.
We’ll learn about more of such functionalities as we move forward in this guide.
GTM OverviewLet’s learn the basic overview of GTM with the help of an example.
Before we start with the example, let’s understand the prerequisites for setting up GTM Tags.
As we mentioned earlier, we’ll need to install the GTM code scripts into our account to implement codes on various tools like Google Analytics or Facebook.
So we have the Global Site Tag script from Google Analytics that we can install on our website.
For demonstration purposes, we have created a demo website that we’ll use to configure our Tags.
We have already configured Global Site Tag and Facebook Pixel to the website. You can access the configured scripts from the Google Tag Assistant extension of the browser.
If your configuration is successful, you’ll be able to see the Facebook Javascript code as well as the Global Site Tag installed on the source code.
Following is another demo website created for the purpose of configuring Tags. Let’s open the source code for that website.
There aren’t any excess codes added to this website. We can only see one snippet for Google Tag Manager.
This is what Google Tag Manager is really all about. It eliminates the need to configure various tracking codes.
Henceforth, we can deploy all our various tracking codes and Tags through this all-in-one central management interface called Google Tag Manager.
Open the Tags section on your Google Tag Manager account. You’ll find all the Tags that you deployed for your website in one single place.
When you open a Tag, you’ll realize that all of the Tags are implemented in the form of templates, not codes.
You can see the Tags on a visual interface and configure them accordingly.
For example, we have a Facebook Pixel Tag configured on our website. All we need to do is add a Facebook Pixel ID, and we can implement this Tag.
Similar to the Tag interface, Google Tag Manager brings various other functionalities that can ease the process of Tag implementation.
One such feature is the preview option.
Preview ModeHence, you can verify the Tags deployed on your website.
For example, the preview mode for our website shows the various Tags we configured to our website under the category called Tags Fired.
Preview mode is especially useful for debugging, tracking or finding errors in our implementation. This is much easier than finding errors in the codes configured in our websites.
This was just one feature provided by Google Tag Manager. Another such feature is called the trigger.
TriggersAs we mentioned earlier, triggers are the rules that define intervals or times at which your Tags get fired.
For example, the triggers for the Tags on our website are on All Pages. This means the Tags we configured will deploy on all the pages of our website.
However, we can also add exceptions to the triggers that will allow our Tags to deploy only on specific pages or interactions.
Let’s understand this with the help of an example.
Open your Google Tag Manager account, and navigate to Triggers → New.
This will give you all the different templates to create a new trigger. In our case, we’ll choose the All Elements type trigger.
Save the trigger configuration.
We can now attach this trigger rule to our marketing Tags for tracking purposes.
Let’s say we want to configure this trigger rule into our Facebook account. So let’s go to Tags → New and create a new Tag to configure this trigger.
Add an appropriate name to the Tag.
Similarly to a trigger, we also have various types for a Tag template. Let’s choose the Facebook Pixel as the Tag type.
You’ll need to configure your Pixel ID by going to the Settings section of the Facebook Business Manager account.
Paste the Facebook Pixel ID to the Tag. As the event type, let’s choose AddToCart under the Standard category.
So that’s how we install our Tags and triggers!
However, this version isn’t live yet. We can still edit and debug it in the Preview mode as we learned earlier.
Let’s connect our website in the preview mode of our browser to verify our Tag implementation.
This information is tracked in our Google Tag Assistant account, as well.
Let’s also test our Tag before we make it live on our website!
On the Facebook Business Manager, navigate to Test Events → Open Website.
Reload the page and choose an item for the Add to cart event.
This event will definitely be monitored by Google Tag Assistant. However, we want to verify the results with Facebook Business Manager, as well.
Under Test Events, we’ll find our fired Tag for Add to cart.
Since the Tag is working as expected, we can publish this version on our website. It will deploy our tracking to the website for all our audiences.
Remember: The best practice is to first create the Tags, and then verify them in debug mode before making any changes to the live website.
So that was our quick lesson on how Google Tag Manager works. If you want to test your knowledge on this lesson, check out this Lesson 1 Quiz.
This was just an overview to help you familiarize yourself with the tool to start your own tracking system.
There is much more to Google Tag Manager. One of the major benefits is installing it on our website.
How to Install Google Tag Manager onto Your WebsiteLet’s first open our Google Tag Manager account.
First-time users will need to sign in to the account. You can sign in with any kind of Google account including your YouTube or Gmail account.
In case you don’t have a Google account, you can create one instantly.
Google Tag Manager is made with accounts and containers.
So, any account is simply a collection of various containers.
Containers are the snippets that are installed onto our website.
It is a good practice to use your company name as your Account Name in GTM. Next, you can add your country name. This is important for privacy reasons.
You can also choose to share this information anonymously with Google.
Let’s move on to containers.
We’ll add our website URL as the Container Name in this case. It isn’t necessary to use the URL for the container name, but we have chosen our own conventional method.
If you have multiple accounts or containers, it is always good to have your own naming convention systems for those accounts.
Next, we’ll choose the Target platform.
Ideally, you can install Google Tag Manager on Web, iOS, Android, AMP, and Server-side platforms.
However, we’ll choose the Web platform for this tutorial.
You’ll receive the terms of service agreement once it configures your information.
With this, we have set up the account portion of Google Tag Manager.
Our next step will be to install the GTM snippets into our website scripts. This is very important for us to deploy codes through Google Tag Manager.
You can also access those snippets through Admin → Install Google Tag Manager.
Let’s now configure these codes onto our website!
Installing GTM Snippets Onto the WebsiteSnippets are extremely important for us to deploy codes through Google Tag Manager.
These scripts will be the last codes we install onto our account, as henceforth, we’ll deploy all our Tags through the Google Tag Manager.
There are two different types of codes in this script. One code is placed in the head section of the script, while the second code is placed in the body section of the script.
We have a demo website for illustration purposes. Our demo website runs on the CMS WordPress setup.
Although WordPress is a widely accepted form of CMS, there are other CMS tools. Therefore, the installation process may vary accordingly.
For example, in WordPress, we can use the theme files, or plugin into our functions PHP, or install a plugin to configure Google Tag Manager to the website.
But once our installation is complete, the outcome will be the same for all of the setups.
You’ll notice that the page script contains a header code for GTM at the beginning of the code.
Also, in the central region, you’ll find the body code for GTM.
There are various methods for executing this installation, but we’ll choose to add the codes to our functions PHP, as this is the most accessible method for all WordPress websites.
Login to the backend section of your website, and navigate to Appearances → Theme Editor.
You can choose the theme as Storefront Child Theme. This way, any updates on our main theme won’t overwrite the edits in this section.
Go to the Theme Header file. This is where we’ll add our changes to the script.
Let’s first copy our header code.
We’ll place the header code below the opening head Tag. This should be as high in the code as possible.
Let’s inspect the HTML after installing the codes.
Reload the website page, and again open the View Page Source section.
If the configuration is correct, you’ll see the GTM code at the beginning of the script.
Similarly, you’ll also see the GTM body code in the central section of the script.
Let’s also verify the results of the script.
Open the Google Tag Assistant Legacy plugin from your browser. You can sign in with the same account as you use for GTM.
If you see GTM in yellow color, it means the installation is incomplete.
You’ll need to publish a version from GTM in order to make this into a green color. This is because although we have GTM installed on our browser, currently it’s not getting any data.
This is just our initialization version. So we’re not adding any Tags or triggers to the setup, but we’re just verifying that our container is in ready-to-use condition.
Let’s reload our website and verify the results in Google Tag Assistant Legacy. If the installation was successful, you’ll see that Google Tag Manager is now seen in green.
Once we’re able to verify the results of Google Tag Manager from the Google Tag Assistant Legacy plugin, our next step will be to use the preview mode on our browser.
This will put our browser into a special mode in which only our browser will be able to track the changes we deploy in the Google Tag Manager account.
This will open our website in a special mode in the new tab.
Let’s navigate any page on our website. The URL changes for different pages.
The Google Tag Assistant account will monitor these changes for us.
You can verify whether Google Tag Assistant is tracking all the pages reached by a user by opening all of your pages once.
If there are any pages that Google Tag Assistant isn’t able to track, then it might be due to internal errors with your theme files or your plugin settings.
It is extremely important for Google Tag Manager to track all the pages in order to deploy all of our codes successfully.
This will also bring your website back to normal mode.
So once the background work is complete, we’ll be able to install and implement our Tags.
That was our quick lesson on how to install Google Tag Manager to your website. If you want to test your knowledge on this lesson, check out this Lesson 2 Quiz.
How to Create a Tag Plan for Your Tracking ImplementationWe’re going to take a look at how we can analyze the current implementation that we have on our web page.
In order to have a complete view of the tracking systems, we’ll set up a tracking plan.
This not only helps in organizing presentation plans for your clients, but it is also crucial for the development of your project.
If you have a new joiner like a PPC manager on your team, this implementation of tracking plans will help him understand your goals in a simpler way.
But the most important reason for this process is that we’re not analyzing random sets of data. We’ll be configuring Intentional tracking.
Intentional tracking is the process that adds value to your tracking by implementing valuable configurations to analyze the data in a simplified manner.
Let’s open our demo shop to understand the process. We already have tracking installed on the website.
However, we haven’t installed GTM tracking on the website. Rather, we have hard-coded the tracking into the Page Source.
No doubt, you can use the various source codes on your website wall to analyze your tracking data.
But we recommend a simpler way. You can use Chrome extension tools like Google Tag Assistant Legacy.
This extension shows you various tracking processes that are implemented on your website simultaneously.
For example, on our website, we have three different tracking processes that are active.
The Global site tag code is running in the background. It mentions the AW code below the name. This suggests that this activity is performed by Google AdWords currently.
Next, we also have a Global site tag for G, which is running for Google Analytics.
Also, we have a Google Ads Conversion Tracking process running in the background.
Google Tag Assistant Legacy, however, only shows Google Tags on your website.
You can also use other plugins like Facebook Pixel Helper, that show you the data on your Facebook Pixel account.
If you want general information about all other integrations, you can also use the ObservePoint Tag Debugger plugin.
This plugin allows you to access information from the More Tools → Developer Tools section of your website.
This will show us all the tracking processes from the various tools we configured on our website.
If you want an even more extensive analysis of the codes and the sources of those Tags, we recommend you install WASP Extension Web Analytics Profiler.
It helps you recognize the sources of various scripts. These may not be marketing scripts but are helpful for debugging.
You can explore various extensions depending on your requirements. Some of these are the Twitter Pixel Helper Extension and the UET Tag Helper Extension.
It is always a good idea to converse with various people related to the tracking field like the IT department, marketeers, or even various agencies.
This can give you a clear understanding of what Tags are already installed on your website scripts and what codes you can further implement to make the tracking easier.
We have created a sheet to formulate the Tag plan for our demo shop account. You can download a copy of this sheet and change the formatting of the sheet to meet your business needs.
You can use it to document information like the date of the creation or implementation of a Tag.
Let’s add the date for a sample Tag we will create today. Our Date will be the date 15/02/2023 as we created the Tag on that day. You can add the date when you wish to create the Tag.
Next, we’ll add the Tag Type. In our case, our Tag Type was Event Tag. As we used it for Google Analytics 4, we’ll keep the Tool as GA4.
Under Responsibility, you can add the name of the individual who is responsible for that Tag campaign. For our Tags, this name is Julian.
Lastly, also mention whether there are any ToDo left for the Tag. In our Tag, this will be migrate to GTM.
Although it does seem cumbersome at first, making an organized Tag plan helps a lot in the long run.
This process is especially useful if you are implementing a major Tag migration.
It helps you to keep track of the Tags that are migrated and the Tags that need to be removed from the website once it’s already inside GTM.
We have an example where we’ve inputted several Tag entries which we wish to install on our GTM account.
This gives us a good idea about the configurations for each Tag.
We don’t need to open our Facebook Pixel account for Pixel ID or our Google Analytics account for the Google Analytics Tracking ID.
This can be especially useful for presentations to your clients or explaining your tracking systems to your colleagues or employees.
Make a copy of your Tags and plan the implementation of your marketing strategy on the sheet.
Once your planning is complete, we’ll deploy our first Tag in a step-by-step process to put this plan into action.
This was our quick lesson on creating a Tag plan for the tracking implementation through Google Tag Manager. If you want to test your knowledge on this lesson, check out this Lesson 3 Quiz.
How to Track Pageviews in Google Analytics 4 with GTMLet’s open our Google Tag Manager account. We already have a version published with this account. But we haven’t yet implemented any Tags inside this container.
We have already created a plan for configuring a GA4 PageView Tag to the account.
The Tag deploys GA4 base tracking. We also have the tracking ID as the notes for configuration.
Let’s see how we got the tracking ID.
Reopen the Page Source code. We can see the gtag code configured to our page. The code also mentions the configuration ID for our account.
We’ll use this ID to migrate our GA4 Tag to the GTM interface. In case you don’t have a Google Analytics 4 account, you can create it by signing in to the Google Analytics website.
Further, you can also find your Tag installation ID by navigating to Admin → Setup Assistant → Tag installation.
Copy your Measurement ID. We’ll use this ID to migrate our codes.
Once we have all the prerequisites, we’ll set up the Tag.
Add a name to your Tag. It is a good practice to use your own customized naming convention for that purpose.
Choose Google Analytics: GA4 Configuration.
This is simply a form in which you can fill in various fields to generate your Tags.
Under the Measurement ID, paste the ID we copied from the GA account.
Next, we’ll configure the trigger.
Triggers are the conditions under which we deploy the Tag.
Let’s verify our implementation by entering the Preview mode.
If your preview mode is successful, you’ll see a message window on your website about Debugger connected.
If you verify the data on your preview tab, you’ll see that the Tag for GA4 – Preview – Configuration – All Pages is fired successfully.
We can also verify the same through the DebugView section on the Google Analytics website.
Currently, our page_view is deployed on our page.
It may take several moments for the data to load.
When the results load, you’ll be able to see that two page-view events are tracked by our tracking tools.
The reason for the two PageView events is that we have two different tracking scripts installed for tracking.
First, we have a tracking code installed in the View Page Source section. Additionally, we also have a Google Tag Manager code running on our page script.
As we are manually tracking this event and also using GTM as our tracking tool for the same event, we are able to see two different entries for the same event.
However, as we know that our GA code is deployed through GTM, we can actually remove that script from our page’s source code.
Let’s now Submit our version for this Tag. It will go live on our website for all our users now.
We’ll now also remove the secondary tracking code from our page source.
Open the theme files for your website. Find your Global Site Tag code, and delete the entire code. Update the file once done.
Reload the website and close the Google Tag Assistant tab.
Finally, we can see that Google Tag Manager is deployed on our website, and Global Site Tag through Google Tag Manager is deployed on the page.
You can verify this once again by navigating to the Page Source code.
If the codes are correctly removed, you’ll be able to see that we only have Google Tag Manager installed on our script.
The Global Site Tag is deployed through GTM.
Going forward, you won’t be able to use DebugView to track user movements. This is because it is only able to track activity for the Preview mode.
Hence, we can use Real-time reports to analyze user behavior and various tracking events.
However, if you develop codes from scratch, you won’t need to remove any access codes as there won’t be any duplicates.
This process is only needed when you are migrating your Tags to Google Tag Manager.
🚨 Note: Google Tag Manager can be integrated with various platforms, learn more about Google Sheets tracking with GTM and Active Campaign tracking with GTM.
This was our quick lesson on planning and implementing the tracking plan through Google Tag Manager. If you want to test your knowledge on this lesson, take the Lesson 4 Quiz.
How to Track Conversions in the Facebook Pixel with GTMWe already have a GA4 Tag installed on our website. Now, we also want to install the Facebook Pixel Tags with GTM.
Both of our Tags will be Fb Pixel Tags. The first one is a Pageview – All Pages Tag, and the second one is a Form – Confirm Page Tag.
The Form Tag is a conversion Tag that tracks whenever a user fills a form and sends over a Lead Event as the result.
Let’s add these Tags to our customized Tag plan.
We also have the configurations from our Pixel accounts. You can find them in the Overview section on your Facebook Business Manager account.
You can also find the configurations from the Settings section of your Pixel account.
Let’s copy the configuration code so we can implement the planned Tag.
Let’s create a New Tag from Tags.
We need a Tag for the Facebook Pixel configuration. Unfortunately, Facebook Pixel isn’t available as one of the templates in the standard templates by Google Tag Manager.
So, we’ll open Community Template Gallery to access the Tag templates by different users.
Search for the relevant Tag and choose the Facebook Pixel Tag configuration.
Go to Add to workspace → Add to confirm the use of the template configuration for our Tag.
The Tag template will now be available in our Tag as its configuration.
Paste the Facebook Pixel ID that we copied from the Facebook Pixel account.
We will keep all the other settings unchanged for this Tag template.
We still need to add a trigger for this Tag. As our Tag is for all our pages, we’ll use the All Pages trigger for this Tag.
Open the Preview mode to verify the Tag configuration.
Let’s reload our website to monitor the changes. As the Tag is configured on all pages, we can track it simply by reloading our page.
If the configuration is correct, you’ll see the Fb – Pageview – All Pages Tag live on your website from your Google Tag Assistant account.
In addition, you can also verify the fired Tags from the Facebook Pixel Helper extension on your browser.
Our Pageview event has already been sent over.
You can also verify the event details from your Facebook Business account.
This action will open your website on another tab. You can reload the website once again to generate a Pageview event.
If the configuration is successful, you’ll see a PageView event added in the Test Events section of your Facebook Business Manager account.
You’ll also get details about your event in this section. The data about the URL, Action Source, and Advanced Matching Parameters are all tracked in our case.
So that’s how we added a Facebook Pixel PageView Tag. We’ll also add the second Tag so that we can go ahead and Publish both Tags in a new version.
Our second Tag is a Fb – Form – Confirm Page Tag.
A form is just one of the many actions that you can track.
It is important to analyze the audience requirements on your website. This will give you an idea about the events you can optimize to generate more traffic on your website.
You can also monitor this traffic by making your users perform a certain action. Creating a form and tracking its confirm page action is one way to do it.
🚨 Note: Check out our detailed guide to form field tracking with Google Tag Manager.
If you have an eCommerce website, you can also track the purchases of users and analyze data accordingly.
Let’s now understand how Fb – Form – Confirm Page Tag works.
We have prepared a sample form on our demo website. Let’s fill out the form to see how the Tag works.
Once the form is filled, we’ll be redirected towards the confirmation page.
We’ll learn to track user movement by using this confirmation page.
Facebook provides a large number of pre-coded tracking scripts on its developer website. You can navigate the one that meets your business requirements.
In our case, the best match for our requirements is the Lead event. This resonates with the standard form that we’re filling on our website.
To send over such a standard event, we first need to create a trigger that will only activate on the confirmation page on our website.
Once we’ve received a confirmation for the completed form, we will open Container Loaded → Variables to verify the tracked data.
Variables are placeholders that GTM uses to evaluate whether it should fire the Tags.
For example, if our Page Path is /ninjaforms/confirm/, then we’ll fire the Tags. Let’s also copy the path URL.
However, if we compare this data with other page views, the page will change based on the page we compared.
Hence, we’ll set our trigger to fire on the variable that follows our chosen path.
Navigate Triggers → New from your GTM account.
This won’t be an All Pages trigger anymore like the ones we previously used. This trigger will only fire on the /ninjaforms/confirm/ path.
Add a Name to the trigger.
We’ll choose Page View as our trigger type. Let’s configure the trigger to fire on Some Page Views only.
As we want our trigger to fire only on a particular page path, let’s add the event conditions as Path Path equals /ninjaforms/confirm/.
Save the Trigger once you’re done.
This trigger will now fire only our /ninjaforms/confirm/ page.
Let’s configure this trigger to a Tag.
Create a new Facebook Pixel type Tag. Add your Facebook Pixel ID.
Choose the Standard Event Name as Lead.
Attach the pv- /ninjaforms/confirm/ trigger that we just created for this Tag.
Let’s verify the configuration by entering the Preview mode.
Open the link to the form page from the preview section of your browser.
Fill out the form to generate data for verification, but don’t submit the data just yet. We’ll see what information the fired Tag generates.
Open the fired Tags data from Container Loaded → Fb – Lead – Confirm Form Tag.
The data shows that our Tag is Not Fired due to the wrong Page Path.
This is because we didn’t actually submit the form to generate the data on our confirmation page. We created our Tag to fire only on the pages containing /ninjaforms/confirm/.
Remember that the confirmation page is the key to generating our results on the Tags. Let’s submit the form and enter the confirmation page.
If the configuration is successful, you’ll see the Tag fired under Container Loaded → Fb – Lead – Confirm Form.
Inside the Tag data, you’ll see that our Tag has Fired, and the criteria of the Firing Triggers match our data,
Verify the same details from the Facebook Pixel Helper extension as well. The data for our Lead event is now available.
Similar information can be tracked from the Facebook Business Manager account. Navigate to Test Events → Lead.
You can extensively use this data to optimize your campaigns successfully.
That was our quick lesson on implementing Facebook Pixel with conversion tracking. If you want to test your knowledge on this lesson, take the Lesson 5 Quiz.
🚨 Note: You can build higher quality audiences in your Facebook Ads by delaying your Facebook Pixel and eliminating bounced users from your audience.
Currently. We already have our GA4 Pageview Tag, a Fb Pageview Tag that fires on all pages, and one Fb Lead event that fires on confirmation pages.
This information can help us tremendously in tracking and optimizing our campaigns.
We’ll use the benefits of Auto-Event triggers.
Auto-Event triggers are the special triggers within Google Tag Manager that enable us to monitor the data of various user interactions on the website.
Such triggers can be found from the trigger types template while creating a new trigger.
They can provide various tracking like All Elements, User Engagements like Element Visibility, Form Submission, Scroll Depths YouTube Video, etc.
There are various methods of performing each of these event trackings.
For example, instead of using the Form Submission trigger, we have created a Confirmation page on our website after the form.
We can effectively track the user’s movements even without the trigger. However, it’s still important to learn to utilize event triggers.
Before we save the version, let’s also modify the Variables accordingly. Navigate to Variables → Configure.
Open the Preview mode and reload the website page.
Our main point of interest here is the Add to cart button.
As we earlier mentioned, there are other methods to carry out this tracking.
Let’s attach this trigger to a Tag now. Create a new Google Analytics: GA4 Event type Tag.
As the configuration Tag, we can choose the GA4 – Pageview Tag we created in the beginning of this guide.
If the configuration is correct, we’ll see our Tag is fired in the Google Tag Assistant.
You can also analyze these Tags from the DebugView option in your Google Analytics account.
All the Tags and triggers are inter-usable. This means you can use these triggers for any of your events.
Verify these results by entering your Preview mode. You can also use your Facebook Business Manager account to track the data by entering Test Events → Open Website.
In the Facebook Business Manager account, you’ll get an Add to Cart event processed on your account.
We’re still one step away from implementation. You need to submit this as a version to make the changes live on your website.
That was our quick lesson on creating Auto-Event tracking with the help of Google Tag Manager. If you want to test your knowledge on this lesson, take the Lesson 6 Quiz.
How to Continue LearningThere are a lot of ways in which you can continue learning about Google Tag Manager.
Note that as Google Tag Manager is a hands-on tool, it requires more time in practicing rather than developing book skills.
Thus, we recommend you develop more experience in creating Tags and monitoring changes in the audience movements.
The best way to develop such experiences is to perform live experiments on a website.
My suggestion would be to create a demo website for practicing GTM even if you have access to a website so you can test new techniques out before implementing them on your website.
If you don’t have an audience base of your own, you can definitely ask your friends to help them out with tracking and analyzing data.
Once you have access to a website, you can experiment with various tracking techniques to get an idea about the processes and their working.
For example, you can start by learning the use of various triggers in the GTM template section like the Element Visibility trigger.
We recommend that you take a look at all the catalogs available in the GTM library and learn to implement them step-by-step.
Don’t worry if you get stuck while learning or implementing any new changes to your tracking systems.
It’s perfectly normal for all new visitors to encounter obstructions while implementing your techniques.
We have created a GTM resource guide that can guide you with relevant resources regarding any implementation problems on your GTM account.
FAQ How do I install Google Tag Manager on my website?To install Google Tag Manager on your website:
How can I test and debug my tags in Google Tag Manager?Google Tag Manager provides a preview mode that allows you to test and debug your tags before they go live on your website. By enabling preview mode, you can verify if the tags are firing correctly and track the data they capture. Additionally, you can use tools like Google Tag Assistant or the Test Events feature in Facebook Business Manager to further test and validate the tag implementation.
Can I roll back changes in Google Tag Manager?Yes, Google Tag Manager allows you to roll back changes by accessing previous versions of your tracking setup. If you encounter issues or want to revert to a previous configuration, you can navigate to the version history in Google Tag Manager and restore a previous version.
SummarySo that’s all you need to know about Google Tag Manager.
You’ll understand more about how Google Tag Manager works when you start working on real models and analyzing live audience trends.
Continue your learning journey by learning about popup tracking with Google Tag Manager.
How To Create A Google Tag Manager Cookie
Would you like to collect and store user data?
That’s exactly where cookies come in handy.
If we set this up correctly, additional pieces of information will allow us to understand our visitors and users better, provide a more elegant and useful visit to our website, and enable us to make better data-driven decisions.
In this post, we’ll show you how to properly set up your Google Tag Manager cookie.
🚨 Note: In case you need consent to track data, you’ll also need to learn how to install a cookie consent banner on your website.
An overview of what we will cover in this guide:
So, let’s dive in!
Creating a GTM Custom JavaScript VariableTo demonstrate how helpful cookies are in your browser, let’s look at an example from my eCommerce shop.
I want to track the revenue I generated from a sale. After placing an order and confirming the purchase, however, this value cannot be seen anywhere on the page.
I want to grab the revenue somehow, but it is not saved anywhere even if you use Google Tag Manager and reload the page. It is simply forgotten once the thank you page is reached.
One of the solutions to grab and remember this value is by using cookies.
Now, let me show you how to create cookies using Google Tag Manager. We’ll make a purchase again and proceed to checkout.
Identifying a Value to be TrackedStep one is to grab the value we want to track.
For this example, we want to grab the revenue. A helpful tool to make this easier is an extension called GTM Variable Builder.
Here, we are given instructions on how to test it out.
Highlight the script and paste it into the console to test it.
We can see that it returns the correct value.
This means we can use this generated JavaScript function in Google Tag Manager. Copy this function.
Creating a GTM VariableThis value is our revenue.
Setting Up a Cookie in GTMStep two is to set a cookie.
There are multiple ways to do this – you could use the custom HTML tag or create a Custom JavaScript variable.
There is a much simpler solution though, which is to use a custom Community Gallery Template.
Type cookie in the search bar, and here we can see our template Cookie Creator.
Here, we should list all the cookies that we want to use and provide their names. In my case, I want to use multiple cookies.
Since this template is created by another developer, any modifications will pause future updates.
However, there’s no need to worry because you can do that manually. For now, let’s continue.
Great! Our template is now ready to use.
Creating a GTM TagStep number three is to create the cookie tag.
Let’s go to Tags to create a New tag.
Under Cookie Name, type revenue.
For the Cookie Value, select the variable we created earlier, which is cjs – revenue.
For the Expiration mode, here you can choose the period for your cookie to expire. You may select another value depending on your business needs, but I will choose By month.
This setup should be fine for most cases, but the most attentive would have noticed that I have a subdomain. If you have a subdomain, you should do an additional setup.
Great. Everything is set up correctly. Now, let’s add a trigger for when this tag should fire.
Adding a TriggerSo, what trigger should I use in this case?
Let’s go back to our checkout page and here you can see that the revenue is available on this specific subpage. This means I can use this part of the URL.
I can copy this and say that this is the subpage where I want to set a cookie.
The reason that we’re using DOM Ready as a trigger is that we have to make sure that all elements are rendered and that we can access their values.
Let’s choose Some DOM Ready Events. Set the condition to be Page URL, contains, and checkout.
Let’s provide a name for this trigger, I’ll put checkout. Then, let’s save our trigger.
We should also provide a name for our tag. Let’s say set cookie – revenue and let’s save our tag.
Great! We have successfully created a cookie tag!
Testing the CookieNow, let’s preview what is happening and check if our tag is working properly.
Under Variables → DOM Ready, we can see our Custom JavaScript variable and that the value is correct.
Now, let’s have a look at our cookie.
In the panel, go to Storage → Cookies. Make sure your domain is selected. In some browsers, like mine, these panels are located under the Application tab.
Here, we can look for revenue and see that the value is correct and works even on the thank you page.
Well done! We have successfully made a Google Tag Manager cookie.
Creating a GTM 1st-Party Cookie VariableNow that we have grabbed the value, the question is – where can I store it?
Our final step is to create a 1st-Party Cookie variable.
Returning to the Google Tag Manager, we’ll go again to Variables → User-Defined Variables, and create a new Variable Configuration.
This time, however, we’ll select 1st-Party Cookie.
Under Cookie Name, we’ll select revenue because this is exactly the name of the cookie we created earlier.
Let’s check if this is working and preview our page one more time.
Testing the VariableOkay, I’ll make a purchase again and proceed to the checkout page.
Going back to Variables → DOM Ready, we can now see both our Custom JavaScript and 1st-Party Cookie variables.
Both have the same value, which is exactly our revenue.
Now let’s make a test purchase to see if the web page can remember our value.
We can see that it has grabbed our new value and remembers it even on the thank you page.
Great! Now, we have a variable in the Tag Manager that you can use for your future tags if you wish to work with this value.
FAQ What is the purpose of creating a Google Tag Manager cookie?Creating a Google Tag Manager cookie allows you to collect and store user data, such as information about shopping cart items, usernames, passwords, and language preferences. It enables better understanding of website visitors and users, improves the user experience, and supports data-driven decision-making.
What is the process of setting up a cookie in Google Tag Manager?There are multiple ways to set up a cookie in Google Tag Manager, but here is a simplified method using a custom Community Gallery Template:
How can I create a GTM 1st-Party Cookie variable?To create a GTM 1st-Party Cookie variable, follow these steps:
SummarySo that’s how you set a Google Tag Manager cookie. Cookies only hold a small bit of data, but they unlock helpful information if set up properly. This additional information opens the room for an improved user experience on your website.
Want to maximize your use of Google Tag Manager? Whether you’re a complete novice or up to an intermediate level, you might find our Google Tag Manager Tutorial helpful.
Google Nexus 10 Twrp Recovery – Guide
Update (Nov. 12, 2013): This guide has just been updated to the latest TWRP, version 2.6.3.0.
Filename: openrecovery-twrp-2.6.3.0-manta.img
First install TWRP v2.6.3.0 in order to successfully update your Nexus 10 to Android 4.4 KitKat. See the Android 4.4 stuff for your Nexus 10 here.
As soon as the Nexus 10 had launched, we saw the most popular custom recovery used for flashing custom ROMs – ClockworkMod (CWM) recovery – get released almost immediately. But the text-only interface of CWM leaves a lot to be desired specially on the beautiful screen of the Nexus 10, but don’t worry, TWRP recovery, with its intuitive and theme-based interface has been released for the tablet as well.
Apart from having a nice interface, TWRP recovery has quite a few other useful features as well, such as fast backups and restores, ability to install ROMs even on encrypted phones, an inbuilt file manager and keyboard functionality, and themes support, making it the best custom recovery out there for any Android device.
However, keep in mind that to flash TWRP recovery (or any other custom recovery), you will need to unlock the bootloader on your Nexus 10. This will wipe all data from your tablet and reset it to factory settings (and will also void warranty, though it is easy to re-lock the bootloader to get warranty back).
The guide below will help you flash TWRP recovery on your Nexus 10. Make sure you read everything carefully, and you’ll have TWRP installed on your tablet in no time at all.
Compatibility
The procedure described below is only for the Samsung Nexus 10. Do not try it on any other device.
Warning!
The methods and procedures discussed here are considered risky, so try them out at your own risk, and make sure to read each step carefully before attempting anything. We will not be held responsible if anything goes wrong.
How to Install TWRP Recovery on Nexus 10
Your tablet’s bootloader will need to be unlocked to flash TWRP. You can unlock the bootloader on your Nexus 10 by following the guide → here. Make sure you took a backup in step 1 as this will wipe all data from the tablet and reset it to factory settings. Skip this if you already have the bootloader unlocked.
Download and install the Android SDK → from here. This will install the necessary drivers for the tablet on your computer. Skip this if you have already installed the SDK while following step 2.
Extract the Fastboot.zip file you just downloaded to a convenient location on the computer to obtain a folder named Fastboot which will have four files inside it. To keep things easy, extract the Fastboot folder to drive C.
Filename: openrecovery-twrp-2.6.3.0-manta.img
Rename the recovery’s filename to something easier to type, like, n10twrp.img
Copy the recovery image file, n10twrp.img, to the Fastboot folder that you obtained in step 5.
Turn off your Nexus 10. Then, boot into fastboot mode by holding down the Volume Down + Power buttons together till the screen turns on and shows “Start” written in big green letters.
Then, connect your Nexus 10 to the computer with your USB cable, then wait for Windows to finish installing the drivers (drivers will be installed only the first time). For reliability, ensure that you use a USB port at the back if you are using a desktop computer, as the front panel ports can be loose and cause problems.
Now, we’ll flash the TWRP recovery image on to the tablet. Follow the steps below to do so.
Navigate to the Fastboot folder which you obtained in step 4. For example, if the Fastboot folder is in drive C on your computer, enter cd C:Fastboot in command prompt (and press Enter) to navigate to the folder.
Then, enter fastboot devices. If your Nexus 10 has been detected properly, you will see a device ID show up in command prompt. If nothing comes up, make sure you have installed the drivers (see step 3).
Now, flash TWRP recovery on the tablet by entering fastboot flash recovery n10twrp.img in the command prompt.
After recovery has been flashed, you should see a “finished”/”OKAY” message in the command prompt.
Do not close the command prompt or disconnect the tablet yet.
TWRP recovery is now installed on your Nexus 10. Type fastboot reboot and hit enter to reboot your Nexus 10.
Let’s reboot into TWRP recovery now to confirm the installation.
For this, Power off our tablet. Enter Fastboot mode as given in step 9 above. Then, press Volume Up a few times till you see Recovery, and then Power button to boot into recovery mode.
You should see TWRP recovery now. If you don’t see TWRP recovery, then you got to do this:
Do the steps 9 to 12 of the guide above again. And then continue to next step of this guide. That is, flash the TWRP recovery but DON’T REBOOT, then do step 2 here.
Now, at a reboot, the system replaces any custom recovery with the stock recovery. We need to prevent that from happening so that TWRP recovery can stay on permanently. Here’s how that can be done:
Type fastboot boot n10twrp.img in the command prompt and press Enter to reboot the tablet into TWRP recovery.
Here, scroll to the bottom where there will be a file named recovery-from-boot.p. Tap on this file, select Rename File, then rename the file to recovery-from-boot.bak. This file restores stock recovery, but since you just renamed it, the system won’t be able to find it, thereby letting TWRP recovery permanently stay on your tablet.
TWRP recovery is now installed on your Nexus 10. To boot into TWRP recovery at any moment, turn off your Nexus 10 and boot into the bootloader mode using the button combination given in step 8. Then, using the volume buttons, scroll to the “Recovery mode” option, then select it using the power button to reboot the tablet into TWRP recovery.
TWRP recovery is now installed on your Nexus 10, and can be used to flash custom ROMs, kernels, and other modifications. Don’t forget to let us know if you run into any problems.
Search Engine Optimization For Secure Server Pages And Dynamic Urls
Search engines do have the ability to spider secure-server-hosted pages, but often these pages require either that a visitor fill out a form or log in with a password and user name before being allowed past a certain point. If any page requires filling out of forms or passwords to reach, search engine robots will simply leave. They can’t log in because they can’t fill out forms, leave email addresses or enter passwords.
First, search engines often either penalize or downgrade sites that use immediate URL forwarding, especially from a home page. URL forwarding suggests doorway pages (a search engine no-no) or affiliate URLs forwarding to an affiliate program site, or the worst of all scenarios, cloaking software on your server. You may not be doing any of these things, but the robots don’t know, don’t care, and don’t index your site, plain and simple.
Secondly, secure servers are very often a separate web site, meaning that the secure server is actually a different machine and is an entirely different site from the non-secure server site unless your site is hosted on a dedicated server on its own IP address, with a security certificate at the same domain. This can happen when secure shopping carts are hosted by a third-party host so that a small ecommerce site needn’t purchase a security certificate or set up complex shopping carts.
For example, if your shopping cart is hosted by Yahoo stores or other application service providers (ASPs), pages hosted in the shopping cart don’t reside on your domain and can’t be recognized as pages on YOUR site unless you also host your domain with the same company. Unfortunately, many shopping cart ASPs use dynamic IP addresses (IP address is different each time you visit) and use database-generated dynamic pages.
The process of serving dynamic pages is not the problem. The problem is simply that the URL of those pages contains several characters that either stop or severely curtail search engine spiders. Question marks (?) are the biggest culprit, followed by ampersands (&), equal signs (=), percent symbols (%) and plus signs (+) in the URLs of dynamic pages.
These symbols serve as alarm bells to the spiders and either turn them away entirely or dramatically slow the indexing of your pages. This is stated simply in the Google “Information for Webmasters” page at :
1. Reasons your site may not be included.
“Your pages are dynamically generated. We are able to index dynamically generated pages. However, because our web crawler can easily overwhelm and crash sites serving dynamic content, we limit the amount of dynamic pages we index.”
Just because your site is dynamically generated, creating long URLs full of question marks, equal signs and ampersands like chúng tôi doesn’t mean you are in search engine limbo. There are simple solutions available for your Webmaster. Here are a couple of articles explaining an elegant solution called “mod_rewrite.”
You can read about that technique if technically inclined:
This technique is simply creating a set of instructions for your web server to present URLs in a different form that replaces those “bad” question marks and ampersands with slash marks (/) instead. The method will require that your Webmaster is a bit more technically savvy than most home-business CEOs who created their own web site. Some hosts will help here by simply turning on the “mod_rewrite” for shared hosting clients.
Don’t play hide and seek with the search engines! Tell them exactly where to find every page on your site — and if there’s any question that they will find every page on your site, give them a map.
Hard-code those dynamic URLs for most subcategories within the categories of different sections of your web site into your comprehensive site map. As long as those dynamic links (even those that include ?=+%& symbols) are hard-coded into a site map, the spiders will follow them. Clearly those 4,500 pages mentioned earlier would be too much for a site map listing. But the main category pages could be provided for the engines.
I visited the site map page of the Webmaster mentioned above and saw 14 pages listed on the site map. That explains why they have 14 pages, not 4,500, indexed by Google.
Guest article by Mike Banks Valentine of SEOptimism
Document Title() Use In Javascript
You can change or get the current title of the document using the document.title attribute. By providing a new title as a string to this attribute, the page’s title can be changed. The chosen title will immediately be reflected in the website’s title.
In this article you will see two types of methods used to change or use Document.title() use in JavaScript
Using the document.title property − You may set or get the current title of the document using the document.title property. By passing the new title as a string towards this property, the title of the page could be modified. By doing this, the recommended title of the website will be changed.
SyntaxFollowing is the syntax of document.title property
newPageTitle = 'The title has changed!'; document.title = newPageTitle; ValueA string with the title of the document in it. It includes the value of document.title if the title was modified by setting it. If not, the markup-specified title is present.
Example 1Before proceeding further let us understand how Document.title is written to execute in this example.
document
.
title
=
“Title has been changed!”
;
document
.
write
(
document
.
title
)
;
Note − You can see the changed title on browser.
Example 2Using the document.title property − In this example let us understand how to use javascript to dynamically change a document’s title.
Describes how to use JavaScript to dynamically modify a web page’s title
.
Tutorialspoint Change Page Title
function
switchTitle
(
)
{
switchTitle
=
‘Tutorialspoint is changed title!’
;
document
.
querySelector
(
‘title’
)
.
textContent
=
switchTitle
;
}
Note − You can see the changed title on browser.
Using querySelector() Method − To choose specific document elements, utilise the document.querySelector() method. The title element could be chosen by including it as a parameter in the selection. The page’s current title element will be returned by this. A node’s particular text content is returned through an element’s ‘textContent’ attribute. By providing a string as the new title’s ‘textContent’ property value, it is possible to update the page’s title. The desired title will be used as the website’s new title as a result.
SyntaxFollowing is the syntax of querySelector() Method
newPageTitle = 'The title has changed!'; document.querySelector('title').textContent = newPageTitle; Example 3Using querySelector() Method − In this example let us understand how to use javascript document.querySelector() method that will return the current title element of the page.
Describes how to use JavaScript that will
return
the current title element
of
the page
.
Tutorialspoint Change Title
function
switchTitle
(
)
{
newDocTitle
=
‘Tutorialspoint is changed title!’
;
document
.
querySelector
(
‘title’
)
.
textContent
=
newDocTitle
;
}
Note − You can see the changed title on the browser.
Update the detailed information about Title Tag Optimization Guide For Google on the Eastwest.edu.vn website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!